postmessage用法詳解-html教學-PHP中文網

首頁

web前端

html教學

postmessage用法詳解

藏色散人

Feb 17, 2020 am 11:13 AM

postmessage

postmessage用法

#關於html5的PostMessage的用法總結

# 大家都知道，網頁之間傳遞資料可以使用ajax請求來完成，今天我總結下我學習的postMessage是如何完成跨頁請求資料的呢？首先，postMessage是html5新增的一個解決跨域的一個方法。那他是如何使用的呢？這裡我把一個案例分享出來把。

相關影片教學推薦：html影片教學

看下面的程式碼：

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
<script>
onmessage=function(e){
  e=e||event;
  document.write("my name is ",e.data);
   document.body.style.background = &#39;red&#39;;
};
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1 id="test接收区">test接收区</h1>
</head>
<body>
 
</body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//给框架网页发送消息，然后收到之后，会传送过来。
f.οnlοad=function(){
 setTimeout(function(){
  f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
 },3000)
}
</script>
</html>

首先，它的原理是這樣的。我就拿我的案例代碼來說吧。

1.html裡面鑲嵌了一個iframe網頁框架，他就是靠這裡傳輸資料的，等1.html載入完成之後，他會主動發給test.html 謝霆鋒，然後test.html收到之後，它裡面有接收訊息的處理函數，他收到訊息之後，立刻，給網頁回傳一段字串，然後把自己的背景改成紅色。這樣就達到了網頁互動的效果，可惜的是，萬惡的ie6.7不支持，相容度不高。

注意：postMessage的寫法，postMessage之前寫的是你要通訊的window物件（也就是你要向誰通訊），此時的window.parent的權限僅限於此，不能在像同域似的，進行獲取父級的DOM元素，否則瀏覽器會報錯，提示你不能進行跨域訪問，我們再來看postMessage中所接收的參數，第一個參數就是你要像另外一個窗口傳遞的數據（只能傳送字串類型），第二個參數表示目標視窗的來源，協定主機連接埠號，是為了安全考慮，如果設定為“*”，則表示可以傳遞給任意視窗。

上面是單頁面互動的，下面給個雙頁面互動的。其實都是一樣的，不過就是兩個頁面都寫了監聽發送事件。

test.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<h1 id="page-nbsp-B">page B</h1>
 
<input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button>
</body>
 
 
<script>
window.addEventListener(&#39;message&#39;, function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = &#39;red&#39;;
}, false);
 
function send() {
    var data = document.querySelector(&#39;#inp&#39;).value;
    parent.postMessage(data, &#39;http://localhost:8080/&#39;); // 若父页面的域名和指定的不一致，则postMessage失败
    // parent.postMessage(data, &#39;*&#39;); // 触发父页面的message事件
}
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1 id="test接收区">test接收区</h1>
</head>
<body>
 
 
<h1 id="page-nbsp-A">page A</h1>
<div class="mb20">
    <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
    <button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
 
<script>
function send() {
    var data = document.querySelector(&#39;#data&#39;).value;
 
    window.frames[0].postMessage(data, &#39;http://localhost:8080/&#39;); // 触发跨域子页面的messag事件
}
 
window.addEventListener(&#39;message&#39;, function(messageEvent) {
    var data = messageEvent.data; 
    console.info(&#39;message from child:&#39;, data);
    document.write("收到了数据： ",data);
    document.body.style.background = &#39;red&#39;;
}, false);
</script>
</body>
</html>

同樣的，1.html是主頁。開啟html，就可以實現互動了。

更多程式相關學習，請關注php中文網程式入門影片教學頻道！

以上是postmessage用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。