H5 跨文件訊息通訊

2021-07-24 10:33:20 字數 1709 閱讀 6362

1 同域下的視窗通訊

兩個頁面:a.html和b.html

開啟另乙個頁面有兩種方式:iframe和window.open

(1)iframe

<1>父級操作子級

如果我們要操作乙個iframe裡面的dom元素,首先要獲取到iframe引入的頁面的window

omyiframe.contentwindow -> 被iframe包含的頁面的window物件

alert(omyiframe.contentwindow);

id="myframe"

src="2.iframe.html">

iframe>

<2>子級操作父級

parent => window 如果當前頁面是頂級,沒有被其他頁面所包含,那麼parent就是當前頁面的window物件,那麼如果被包含了,則parent就是包含當前頁面的父級頁面的window物件

parent.document.body.style.background = 'green';

window : 當前視窗

parent : 父級視窗

top : 頂級視窗

(2)window.open

window.open(『www.baidu.com』,』_blank』);開啟新的視窗

window.opener : 通過window.open方法開啟當前頁面的視窗window

window.opener.document.body.style.background = 'green';
2 跨域視窗間的通訊

<1>傳送端

postmessage : 可以通過這個方法給另外乙個視窗傳送資訊

接收訊息的視窗的window物件.postmessage();

第乙個引數:傳送的資料

第二個引數:接收資料的網域名稱{帶上協議}

omyiframe.contentwindow.postmessage('1', '');
<2>接收端

message : 當視窗接收到通過postmessage傳送過來的資料的時候觸發

ev.data : 傳送過來的資料

ev.origin:傳送端的**

window.addeventlistener('message', function

(ev)

}, false);

}

3 ajax跨域通訊

在標準瀏覽器下,xmlhttprequest物件已經是公升級版本,支援了更多的特性,可以跨域了

但是,如果想實現跨域請求,還需要後端的相關配合才可以:header(『access-control-allow-origin: //這是允許訪問該資源的域

xmlhttprequest : 增加很多功能,他也不推薦使用onreadystatechange這個事件來監聽,推薦使用onload(請求完成並且成功獲取到)

onload就相當於之前寫的

request.onreadystatechange = function()else} }

};

xdomainrequest : ie如果想實現跨域請求,則需要使用另外乙個物件去實現

使用onload

OC和H5資料互動之H5給OC發訊息

應用場景 ooc原生webview巢狀乙個h5頁面,這個頁面要實現截圖後儲存到手機的功能.流程如下 001 ocwkwebview 需要增加乙個獲取h5訊息的訊號量 002 通過wkwebview的 方法獲取到h5傳送的訊息 003 根據與h5約定的型別就行截圖和儲存手機操作 如下 wkwebvie...

h5應用資料加密 H5定製開發方案

正文共計 815字預計 產品特性 快速迭代 h5常用於輕量級應用,例如 活動營銷頁面 拉新等,而這些相對開發成本比較低,也可滿足市場需求進行快速迭代。專屬方案 所想即所得,為客戶量身定製策劃方案 多種定製 提供活動營銷 商業 遊戲有效等多種定製 全新互動 互動性強,視覺效果佳,使用者的感官體驗好,可...

H5問題總結

很多時候設計稿中的icon很小,但是實際製作頁面時,如果這個icon可操作,icon的可操作域應該做大一些,不然在裝置中會經常發生操作之後沒反應 其實是沒有觸發在操作域上 少掉坑,h5建議 0.很多時候設計稿中的icon很小,但是實際製作頁面時,如果這個icon可操作,icon的可操作域應該做大一些...