碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
框架通過postMessage進行不同頁面間的數據傳遞</a></h3> </center> <div class="postinfo"> 本文轉載自 <i class="icon-globe"></i>&nbsp;<a href="/go/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vdGFuZ2d1b2JvL3AvMTExMzA0NzQuaHRtbA==" target="_blank">查看原文</a> <i class="icon-time"></i>&nbsp;<span>2019-07-04 10:06</span> <i class="icon-eye-open"></i>&nbsp;<span>564&nbsp;</span> <i class="icon-tag"></i>&nbsp; <span><a href='/tag/前端開發' target="_blank">前端開發</a>/</span> <span><a href='/tag/postMessage' target="_blank">postMessage</a>/</span> <span><a href='/tag/js' target="_blank">js</a></span> <i class="icon-star" title="1.4114"></i> </div> <hr/> <div class="media-body" id="content_div"> <div class="title_down_ad ad"> </div> <div class="post_content" id="postContent"> <p>最近做項目的時候使用arcgis api的popup與echarts圖表相結合展示，然而由於popup屬於動態生成，生成時間點無法獲取，導致echarts無法綁定至popup中（不論是promise.then()方法，還是創建div時使用createElement()方法，都無法生效。setTimeout()方法應該可以，暫還未嘗試）。因此，在popup中使用了&lt;iframe&gt;框架來獲取其他頁面的echarts.因此就需要進行不同頁面間的數據傳遞。</p> <h1>一、postMessage()傳遞信息</h1> <p>postMessage()屬於js的window方法，安全地啟用Window對象之間的跨源通信；</p> <h3>postMessage()方法語法</h3> <div class="cnblogs_code"> <pre><strong>targetWindow .postMessage（message，targetOrigin，[ transfer ]）;</strong></pre> </div> <p>其中：</p> <p><strong><code><em><span style="color: #ff0000;">targetWindow</span>&nbsp;</em></code></strong>對將接收消息的窗口的引用。獲得此類引用的方法包括：</p> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <ul> <li><code>Window.open</code>&nbsp;（生成一個新窗口然后引用它），</li> <li><code>Window.opener</code>&nbsp;（引用產生這個的窗口），</li> <li><code>HTMLIFrameElement.contentWindow</code>（<code>&lt;iframe&gt;</code>從其父窗口引用嵌入式），</li> <li><code>Window.parent</code>（從嵌入式內部引用父窗口<code>&lt;iframe&gt;</code>）</li> <li><code>Window.frames</code>&nbsp;+索引值（命名或數字）。</li> </ul> <p><code><em><strong><span style="color: #ff0000;">message</span></strong>&nbsp;</em></code>要發送到其他窗口的數據。使用結構化克隆算法序列化數據。這意味着您可以將各種各樣的數據對象安全地傳遞到目標窗口，而無需自己序列化。</p> <p><code><em><strong><span style="color: #ff0000;">targetOrigin</span></strong>&nbsp;</em></code>指定要調度的事件的<code>targetWindow</code>的原點，可以是文字字符串<code>"*"</code>（表示沒有首選項），也可以是URI。如果在計划調度事件時，<code>targetWindow</code>文檔的方案，主機名或端口與<code>targetOrigin</code>提供的內容不匹配，則不會調度該事件；只有當所有的三個條件都匹配時，將調度該事件。該機制可以控制發送消息的位置；例如，如果<code>postMessage()</code>用於傳輸密碼，則該參數必須是URI，其來源與包含密碼的消息的預期接收者相同，以防止惡意第三方攔截密碼。<strong>始終提供具體的<code>targetOrigin</code>，而不是<code>*</code>，如果您知道其他窗口的文檔應該位於何處。未能提供特定目標會泄露您發送給任何感興趣的惡意站點的數據。</strong></p> <p><span style="color: #ff0000;"><code><em><strong>transfer</strong></em></code></span>（可選的）是與消息一起傳輸的<code>Transferable</code>對象序列。這些對象的所有權將提供給目標端，並且它們在發送端不再可用。</p> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p><span style="color: #ff0000; font-size: 18px;"><strong>注意：</strong></span></p> <p><span style="font-size: 16px;"><strong>原則上，postMessage()方法可以傳遞任何參數，但是不同瀏覽器上允許傳遞接收的參數不同，大部分瀏覽器僅支持傳遞字符串。經測試。谷歌瀏覽器允許傳遞接收string類型，boolean類型，Array類型，不允許傳遞接收Object類型。</strong></span></p> <h1>二、addEventListener()監聽信息傳遞后添加事件</h1> <p>addEventListener()是DOM方法，用於向指定元素添加事件句柄。我們通過addEventListener()方法給傳遞過來的Message添加事件。</p> <h3>addEventListener()方法語法</h3> <div class="cnblogs_code"> <pre>element.addEventListener(event, <span style="color: #0000ff;">function</span>, useCapture)</pre> </div> <p>其中：</p> <p>&nbsp;</p> <p><code><em><span style="color: #ff0000;"><strong><code><em>event</em></code></strong></span>&nbsp;</em></code>必須，字符串，指定事件名。</p> <p><code><em><span style="color: #ff0000;"><strong>function</strong></span>&nbsp;</em></code>必須，指定要事件觸發時執行的函數。&nbsp;當事件對象會作為第一個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。</p> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p><code><em><strong><span style="color: #ff0000;"><em>useCapture</em></span></strong>&nbsp;</em></code>指可選。布爾值，指定事件是否在捕獲或冒泡階段執行。&nbsp;可能值:</p> <ul> <ul> <li>true - 事件句柄在捕獲階段執行</li> <li>false- false- 默認。事件句柄在冒泡階段執行</li> </ul> </ul> <h1>三、&lt;iframe&gt;框架傳遞示例</h1> <p><span style="font-size: 18px;"><strong>主頁面：（</strong></span><strong><span style="font-size: 18px;">http://域名/main.html</span></strong><span style="font-size: 18px;"><strong>）</strong></span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>主頁面<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;</span>主頁面<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">iframe </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="iframePopup"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="<a href="/link/aHR0cDovLzE5Mi4xNjguNS4xMC9hcmNnaXNfYXBpLw==" rel="nofollow noopener" target="_blank">http://域名/test/</a>"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span>主頁面接收消息區域<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="messageReturn"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></pre> </div> <div class="cnblogs_code"> <pre>&lt;script&gt;<span style="color: #000000;"> window.onload </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;">(){ </span><span style="color: #008000;">//</span><span style="color: #008000;">父頁面發送消息</span> <span style="color: #0000ff;">var</span> iframePopup=document.getElementById('iframePopup'<span style="color: #000000;">) .contentWindow; iframePopup.postMessage(</span>"主頁面消息"<span style="color: #000000;">, </span>"http://域名/test/"<span style="color: #000000;">) </span><span style="color: #008000;">//</span><span style="color: #008000;">父頁面接收iframe子頁面返回信息</span> window.addEventListener('message',<span style="color: #0000ff;">function</span><span style="color: #000000;">(event){ console.log(event); document.getElementById(</span>'messageReturn').innerHTML = "收到" + event.origin + "消息：" + event.data; }, <span style="color: #0000ff;">false</span><span style="color: #000000;">); } </span>&lt;/script&gt;</pre> </div> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4353345653789615" data-ad-slot="4890554435"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({});</script> <p><span style="font-size: 18px;"><strong>&lt;iframe&gt;框架頁面：（</strong><strong>http://域名/test</strong><strong>）</strong></span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;">&lt;!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span>iframe子頁面<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">title</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span>iframe子頁面<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">&gt;</span>接收消息區域<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="message"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000ff;">&gt;</span> <span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">html</span><span style="color: #0000ff;">&gt;</span></pre> </div> <div class="cnblogs_code"> <pre>&lt;script&gt; <span style="color: #008000;">//</span><span style="color: #008000;">iframe子頁面接收信息</span> window.addEventListener('message',<span style="color: #0000ff;">function</span><span style="color: #000000;">(event){ console.log(event); document.getElementById(</span>'message').innerHTML = "收到" + event.origin + "消息：" +<span style="color: #000000;"> event.data; }, </span><span style="color: #0000ff;">false</span><span style="color: #000000;">); </span><span style="color: #008000;">//</span><span style="color: #008000;">iframe子頁面接收信息后回復父頁面信息</span> window.addEventListener('message',<span style="color: #0000ff;">function</span><span style="color: #000000;">(event){ console.log(event); document.getElementById(</span>'message').innerHTML = "收到" + event.origin + "消息：" +<span style="color: #000000;"> event.data; top.postMessage(</span>"子頁面消息收到", 'http://域名/main.html'<span style="color: #000000;">) }, </span><span style="color: #0000ff;">false</span><span style="color: #000000;">); </span>&lt;/script&gt;</pre> </div> <p>&nbsp;</p> </div> <div class="read-more" id="read-more" style="display:none"></div> <div class="alert alert-info" style="margin-top:20px;"> <p id="tips_top1"> </p> </div> <script type="text/javascript"> $("#tips_top1").append("<strong><i class=\"icon-fire\"></i>溫馨提示：</strong>如果本文未解決您的問題，可以免費向大模型提問：<strong><a href='javascript:void(0)' class='gptbtn'>向AI大模型提問</a></strong>。"); </script> <div class="iframe-container"> </div> </div> <div class="ad_content_down ad"> </div> </div> <div class="disclaimer visible-desktop"> <br/> <div class="alert alert-block"> <button type="button" class="close" data-dismiss="alert">×</button> <h4>免責聲明！</h4> <p>本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。</p> </div> <br/><br/> </div> </div> <!-- 右邊相關博客和資料 --> <div class="span4 left_content"> <div id="left_list_div" class="left_content"> <span class="list-group-item" href="javascript:void(0)"><i class="icon-filter"></i><strong>猜您在找</strong></span> <a class='list-group-item' href="/blog/a3d6761.html" title="利用 postMessage 進行數據傳遞 （iframe 及web worker）及問題"> <i class="icon-file"></i> 利用 postMessage 進行數據傳遞 （iframe 及web worker）及問題 </a> <a class='list-group-item' href="/blog/b4729c1.html" title="window.postMessage 在iframe父子頁面數據傳輸"> <i class="icon-fire"></i> window.postMessage 在iframe父子頁面數據傳輸 </a> <a class='list-group-item' href="/blog/8bd8f51.html" title="vue引入iframe的父子頁面的數據傳遞"> <i class="icon-fire"></i> vue引入iframe的父子頁面的數據傳遞 </a> <a class='list-group-item' href="/blog/8fa6431.html" title="js實現Html頁面間跳轉之數據傳遞"> <i class="icon-fire"></i> js實現Html頁面間跳轉之數據傳遞 </a> <a class='list-group-item' href="/blog/783b0e1.html" title="HTML5中window.postMessage，在兩個頁面之間的數據傳遞"> <i class="icon-file"></i> HTML5中window.postMessage，在兩個頁面之間的數據傳遞 </a> <a class='list-group-item' href="/blog/a5af861.html" title="vue 給嵌套的iframe子頁面傳數據 postMessage"> <i class="icon-fire"></i> vue 給嵌套的iframe子頁面傳數據 postMessage </a> <a class='list-group-item' href="/blog/703b0a1.html" title="Express框架與html之間如何進行數據傳遞"> <i class="icon-file"></i> Express框架與html之間如何進行數據傳遞 </a> <a class='list-group-item' href="/blog/91451d1.html" title="PostMessage實現多窗口之間的數據傳遞"> <i class="icon-file"></i> PostMessage實現多窗口之間的數據傳遞 </a> <a class='list-group-item' href="/blog/cb04221.html" title="iframe頁面父頁面與子頁面之間相互進行數據傳送及方法調用"> <i class="icon-file"></i> iframe頁面父頁面與子頁面之間相互進行數據傳送及方法調用 </a> <a class='list-group-item' href="/blog/2b0ff91.html" title="WinForm中窗體間的數據傳遞（一）"> <i class="icon-file"></i> WinForm中窗體間的數據傳遞（一） </a> <div id="right_float_ad" class="ad"> </div> </div> </div> </div> </div> <div class="clear">&nbsp;</div> <div class="fbar" style="z-index:100"> <div class="span7" style="color:grey;font-size:12px;"> </div> <div class="pull-right"> <span><a href="http://beian.miit.gov.cn" rel="nofollow" target="_blank">粵ICP備18138465號</a>&nbsp;&nbsp;</span><span>&copy; 2018-2025 CODEPRJ.COM </span> </div> </div> <script src="/js/code.js?version=20250512"></script> <script> function buffer(a, b, c) { var d; return function() { if (d) return; d = setTimeout(function() { a.call(this), d = undefined }, b) } } (function() { function e() { var d = document.body.scrollTop || document.documentElement.scrollTop; d > b ? (a.className = "div1 div2", c && (a.style.top = d - b + "px")) : a.className = "div1" } var a = document.getElementById("float"); if (a == undefined) return ! 1; var b = 0, c, d = a; while (d) b += d.offsetTop, d = d.offsetParent; c = window.ActiveXObject && !window.XMLHttpRequest; if (!c || !0) window.onscroll = buffer(e, 50, this) })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c81b3b98809d882ddda9a802d3778cf4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>
