不同頁面間跨域資料通訊解決方案

2021-09-12 08:47:36 字數 670 閱讀 9211

解決思路:利用localstorage跨域的解決方案——postmessage和iframe

頁面 speak.html 在域a上,頁面 iframe.html 在域b上;

將 iframe.html 通過 iframe 嵌入到 speak.html;

在 iframe.html 頁面呼叫 changespeak() 函式觸發 speak.html 頁面語音開啟狀態,若開啟語音,主頁面同時向 iframe.html 頁面傳送語音文字。

注意:由於專案具體部署路徑不同,需根據具體情況修改url

speak.html 中

src的值需改為 iframe.html 所在的位址;

iframe.html 中window.parent.postmessage(isspeak, 'http://ip:port/');url 需改為 speak.html 所在的位址;

主頁面,放在域a上

page a

子頁面,放在域b上

page b

click to speak

不同頁面通訊與跨域

相信跨域有什麼手段,大家都背得滾瓜爛熟了。現在我們來做一些不在同乙個tab頁面或者跨域的實踐。localstorage是瀏覽器同域標籤共用的儲存空間,所以可以用來實現多標籤之間的通訊。html5出現了乙個事件 onstorage,我們在window物件上新增監聽就可以監聽到變化 window.add...

web不同頁面通訊 安全跨域通訊

在子頁面向父頁面傳送訊息,使用 parent.postmessage 在父頁面向子頁面傳送訊息,使用 window.frames index postmessage data 傳送的資料 origin 傳送的源 bool 可選 false 事件冒泡 true 事件捕獲 window.postmess...

js 頁面跨域

前言html5新增通訊相關兩個api,跨文件訊息傳輸與web sockets api,跨文件訊息傳輸功能,可以在不同網頁文件,不同埠 跨域情況下 進行訊息傳遞。使用web sockets api 可以讓客戶端與伺服器端通過socket埠傳遞資料,這樣便可以使用資料推送技術。跨文件訊息傳輸在之前我們若...