国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

跨文檔通信的7種方法

阿羅 / 2217人閱讀

摘要：摘要以下總結(jié)的跨文檔通信方法，均是在服務(wù)器不參與的情況下服務(wù)端無需特殊的代碼實(shí)現(xiàn)的這里的通信，是指頁面向頁面?zhèn)鬟f信息大致分為以下三類通過實(shí)現(xiàn)雙向通信通過客戶端存儲(chǔ)實(shí)現(xiàn)通信在頁面跳轉(zhuǎn)的過程中攜帶信息中其中第一種方法沒有跨域的限制，且實(shí)現(xiàn)的是雙

摘要

以下總結(jié)的跨文檔通信方法，均是在服務(wù)器不參與的情況下（服務(wù)端無需特殊的代碼）實(shí)現(xiàn)的

這里的通信，是指頁面A向頁面B傳遞信息

大致分為以下三類

通過 window.postMessage 實(shí)現(xiàn)雙向通信

通過客戶端存儲(chǔ)實(shí)現(xiàn)通信

cookie

webStorage

indexedDB

在頁面跳轉(zhuǎn)的過程中攜帶信息

window.name

Url 中 hash

window.history.replace() && document.referrer

其中第一種方法沒有跨域的限制，且實(shí)現(xiàn)的是雙向通信；第二種方法本質(zhì)上利用的是同源文檔可以訪問同一塊數(shù)據(jù)實(shí)現(xiàn)通信；第三種方法只能實(shí)現(xiàn)定向的單次的通信，且沒有跨域的限制

通過 window.postMessage 實(shí)現(xiàn)通信 搭建服務(wù)端 
const http = require("http")
const fs = require("fs")

http.createServer((req, res) => {
  fs.readFile(`.${req.url}`, (err, data) => res.end(data))
}).listen(8888)
編寫文檔 index1.html 
...

    index1
    
    
    

...
編寫文檔 index2.html 
...

    index2
    

...

以上代碼實(shí)現(xiàn)了通過 index1.html，新建窗口 index2.html

index1.html 向 index2.html 發(fā)送消息 messageFromIndex1

index2.html 收到來自 index1.html 的消息，并返回消息 meesageFromIndex2

index1.html 和 index2.html 互相傳遞消息的過程并不需要服務(wù)端參與

測試過程

啟動(dòng)服務(wù)器 node server.js

訪問 http://localhost:8888/index1.html

先后點(diǎn)擊 new Window 和 send Message，可以看到在 index1.html 和 index2.html 的控制臺(tái)中分別出現(xiàn)了 messageFromIndex2 和 messageFromIndex1

補(bǔ)充

通過 postMessage 可以實(shí)現(xiàn)跨域的信息傳遞，因此也要注意傳遞信息的過程中要檢查信息的安全性

通過客戶端存儲(chǔ)手段實(shí)現(xiàn)通信

將需要傳遞的信息保存在客戶端中，只有同源的文檔才能訪問，具體的實(shí)現(xiàn)方式有

cookie

webStorage

IndexedDB

通過設(shè)置 cookie 進(jìn)行通信

當(dāng)服務(wù)端沒有設(shè)置 cookie 為 HttpOnly 時(shí)，可以在瀏覽器端設(shè)置和訪問 cookie，而 cookie 本質(zhì)上是服務(wù)器發(fā)送到用戶瀏覽器并保存在瀏覽器上的一塊數(shù)據(jù)，同源的文檔可以訪問 cookie

修改 index1.html

...

    index1
    
    

...

修改 index2.html

...

    index2
    

...

可以看到在 index2.html 的控制臺(tái)中打印出了信息 "name=test"

通過 cookie 進(jìn)行跨文檔通信，就像同源文檔訪問同一個(gè)對(duì)象

通過 webStorage 進(jìn)行通信

webStorage 就像一個(gè)數(shù)據(jù)庫，同源的文檔訪問同一個(gè)子數(shù)據(jù)庫

具體操作方法如下

window.localStorage.setItem(key, value)

window.localStorage.getItem(key)

通過 indexedDB 進(jìn)行通信

indexedDB 就是一個(gè)數(shù)據(jù)庫

修改 index1.html

...

    index1
    index2.html
    
    
    

...

修改 index2.html

...

    index2
    
    

...

如此實(shí)現(xiàn)在 index1.html 中修改 indexedDB 中存儲(chǔ)的數(shù)據(jù)時(shí)，index2.html 中也可以訪問到，以此來間接實(shí)現(xiàn)通信

indexedDB中文入門教程詳解

頁面跳轉(zhuǎn)的過程中攜帶信息

以下這些方法都沒有域的限制，但對(duì)跳轉(zhuǎn)到新頁面的方式有限制

通過 window.name 進(jìn)行通信

設(shè)置 window.name = message

當(dāng)通過 window.location.href 或 index2.html 在當(dāng)前窗口載入新頁面時(shí)，window.name 仍保存著上個(gè)頁面所設(shè)置的信息

修改 index1.html

...

    index1
    index2.html
    

...

修改 index2.html

...

    index2
    

...

會(huì)在控制臺(tái)輸出 messageFromIndex1

通過在 url 中添加 hash 字段

修改目標(biāo)文檔的 url，將想要傳遞的信息保存在 url 的 hash 字段中

通過 window.history.replace() 和 document.referrer

設(shè)置 window.history.replaceState(window.history,state, document.title, "message")

從該頁面到新頁面后，通過 document.referrer 就可以看到來自上個(gè)頁面的信息

修改 index1.html

...

    index1
    index2.html
    

...

修改 index2.html

...

    index2
    

...

會(huì)在控制臺(tái)輸出 http://localhost:8888/messageFromIndex1

這里利用的是 window.history.replaceState() 修改 url，并不會(huì)使頁面重新加載，所以將信息存在 url 中

document.referrer 會(huì)保存返回跳轉(zhuǎn)或打開到當(dāng)前頁面的那個(gè)頁面的 url

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92932.html

相關(guān)文章

  • 跨域方法總結(jié)（一），JSONP

    摘要：注為頂級(jí)域名，為二級(jí)域名，為三級(jí)域名跨域并非瀏覽器限制了發(fā)起跨站請求，而是跨站請求可以正常發(fā)起，但返回結(jié)果被瀏覽器攔截了。四總結(jié)首先在客戶端注冊一個(gè)，然后把的名字傳給服務(wù)器。 前言 博主博客：Stillwater的博客知乎專欄：前端汪汪本文為作者原創(chuàng)轉(zhuǎn)載請注明出處：http://hiztx.top/2017/01/15/j... ??本文介紹了什么是跨域，為什么要跨域，以及跨域的一種...

    KoreyLee 評(píng)論0 收藏0

  • 淺談前端跨域

    摘要：一什么是跨域跨域簡單的理解就是同源策略的限制。同源策略限制的內(nèi)容請求不能正常進(jìn)行。同源策略默認(rèn)地址是網(wǎng)頁的本身。 一、什么是跨域？ 跨域簡單的理解就是JavaScript同源策略的限制。是出于安全的考慮，a.com域名下的js不能操作b.com或者c.com域名下的對(duì)象。 當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí)，都算作不同域。不同域之間相互請求資源，就算叫跨域。 一個(gè)正常...

    dunizb 評(píng)論0 收藏0

  • 深入淺出Ajax

    摘要：在接收響應(yīng)期間持續(xù)不斷地觸發(fā)。在請求發(fā)生錯(cuò)誤時(shí)觸發(fā)。在通信完成或者觸發(fā)或事件后觸發(fā)。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。基于標(biāo)準(zhǔn)被廣泛支持。破壞程序的異常處理機(jī)制。 原文（我的GitHub）：https://github.com/liangfengbo/frontend-ability/issues/1 學(xué)習(xí)大綱 理解Ajax的工作原理 Ajax核心-XMLHttpRequest對(duì)象 封裝Aja...

    megatron 評(píng)論0 收藏0

  • 頭條日常實(shí)習(xí)生面經(jīng)2018.11.28

    摘要：共享內(nèi)存是最快的方式，它是針對(duì)其他進(jìn)程間通信方式運(yùn)行效率低而專門設(shè)計(jì)的。套接字套解口也是一種進(jìn)程間通信機(jī)制，與其他通信機(jī)制不同的是，它可用于不同及其間的進(jìn)程通信。來自的解釋九什么受同源策略的限制，支持跨域一種新的通信協(xié)議標(biāo)準(zhǔn)。 第一次大公司面試的面經(jīng) 此次面試說來也有點(diǎn)匆忙，本沒想過自己會(huì)那么快就想去面試大公司，并且把自己第一次面大公司的各種不足展現(xiàn)得一覽無余。當(dāng)時(shí)11月20號(hào)左右身邊...

    nanfeiyan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<