跨文檔通信postMessage

原創

2020-03-14 22:14

跨文檔通信 postMessage

window.postMessage(message, origin, [transfer])
message: 最好是傳遞字符串
origin：域信息，指定框架中文檔來源的域，如果域匹配纔會傳遞消息
transfer：不常使用，是一串課message同時傳遞的Transferable對象，這些對象的所有權將被轉移給消息的接收方，而發送一方不在保留所有權

demo

A.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這是A頁面</p>
    <div id="boxa"></div>
<!--A頁面引入B頁面，向B頁面發送消息-->
    <iframe id="iframe" src="http://127.0.0.1:3001/B.html" frameborder="0"></iframe>
    <script>
        iframe.onload = function () {
            //向B頁面發送消息
            //如果不寫 '*' 會提示跨域，但是不推薦寫 '*'，因爲不安全
            iframe.contentWindow.postMessage('hello b頁面，我是A', '*')
        }

        window.onmessage = function (ev) {
            var h2 = document.createElement('h2')
            h2.innerHTML = ev.data
            document.getElementById('boxa').appendChild(h2)
        }


    </script>
</body>
</html>

B.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這是B頁面</p>
    <div id="box"></div>
    <script>
        // 監聽a
        window.onmessage = function (ev) {
            var h1 = document.createElement('h1')
            h1.innerHTML = '這是b,收到了a的消息:' + ev.data
            document.getElementById('box').appendChild(h1)
        //   B發送給a
            ev.source.postMessage('hello a, i am b, i receiver your message', ev.origin)
        }
    </script>
</body>
</html>

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

相關文章

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合*使您可以利用現代Web開發堆棧*包括React*Angular*ASP.NET Core*jQuery*Knockout等*構建交互式的Web應用程序。從Ang

2024-05-31 12:32:20

界面控件DevExtreme v23.2亮點 - 標籤、表單、編輯器功能升級

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

2024-05-28 12:19:08

界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

2024-05-07 11:34:56

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？ DOCTYPE（文檔類型聲明）是一種在HTML文檔中使用的標記，用於告訴瀏覽器使用哪個HTML版本解析文檔。它的作用是確保瀏覽器正確地渲染和

2024-04-25 11:51:01

數字化變革探索：檢驗檢測行業轉型思路揭祕

行業背景隨着科技的不斷進步和實驗室管理需求的不斷髮展，傳統實驗室管理方式面臨着許多問題，如採用紙質記錄和手工操作、數據易丟失和難以追溯、效率低下、流程複雜以及質量管理不規範等。這些問題已經成爲制約實驗室發展和提升運行效能的瓶頸。與此同時，

2024-04-22 22:23:02

canvas和context的關係畫布和畫筆的關係

在HTML5中，Canvas是一個圖形繪製區域，它是一個HTML標籤，用於在網頁上動態渲染2D和3D圖形。而Context是Canvas的上下文，它是用於在Canvas上進行繪圖的接口。具體來說，有2D Context和3D Context

2024-03-29 21:24:02

移動端提高pdf預覽清晰度

背景：移動端預覽PDF文件，通用的解決方案是使用vue-pdf插件，其內置pdf.js，原理是基於 HTML5 的 <pdf> 標籤，通過將 PDF 文件轉換爲圖片或<canvas>來實現對 PDF 文件的預覽，插件好使沒毛病😆，但是如果

2024-03-29 12:28:09

前端和後端哪個工資高?工作內容和晉升空間差別大嗎?

前端和後端哪個工資高?工作內容和晉升空間大嗎? 事實上，兩個都是屬於技術研發崗位，都是高薪有前途的職業，不存在說哪個工資更高些，都基本在一萬到五萬之間，工資的差別主要體現在個人技術上。要問做前端好還是做後端好?其實無論做前端還是做後端，只要

2023-10-10 09:54:59

現在入行web前端開發晚了？數據代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。數據來源：職友集就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。通常來講：工作1~2年後會成爲前端高級軟件工程師，年薪可以

2023-10-10 09:54:58

聚焦Web前端安全：最新揭祕漏洞防禦方法 | 京東雲技術團隊

在 Web 安全中，服務端一直扮演着十分重要的角色。然而前端的問題也不容小覷，它也會導致信息泄露等諸如此類的問題。在這篇文章中，我們將向讀者介紹如何防範Web前端中的各種漏洞。【萬字長文，請先收藏再閱讀】首先，我們需要了解安全防禦產品已經

2023-08-10 11:59:49

原來VSCode裏藏了騰訊文檔400行代碼？鵝廠源碼公開

👉騰小云導讀 Visual Studio Code「VSCode」是 Microsoft 在2015年推出的、針對於編寫現代 Web 和雲應用的跨平臺源代碼編輯器，受到廣大開發者熱捧。騰訊文檔向 VSCode 貢獻了一些核心代碼，主要涉

騰訊雲開發者社區

2023-03-21 23:47:28

【SharePoint】視頻播放應用測評比較

場景需要一個能夠免費播放在線 mp4 視頻（有 URL 鏈接）的頁面組件，視頻沒有上傳到 SharePoint 網站上。應用 vSlider Video Carousel 提供者 The Estro Collection 優點可以看

2023-02-23 23:10:53

【走高速】XSS 防禦方法

這裏分兩個方向來說XSS的防禦方法，PART I 是從具體的原理機制上講，PART II 是從業務形式上說；另外，因爲DOM-Based XSS比較特殊，所以另外分成一個PART III 寫對它的防禦。 PART I 輸入過濾輸出

2022-04-30 11:29:24

Web3D 從入門到跑路 · 3D 初體驗

本文整理自老馮於凹凸 2022 年技術分享，帶領大家從案例、應用、技術生態出發，讓大家瞭解一下 3D 在 Web 端的現狀。 3D初體驗 Hey 3D what's up，最近在 Web 圈混得怎樣在“元宇宙”概念越來越火

2022-04-30 10:05:58

技術整理（陳年佳釀）

技術站點 Hacker News：非常棒的針對編程的鏈接聚合網站 Programming reddit：同上 MSDN：微軟相關的官方技術集中地，主要是文檔類 infoq：企業級應用，關注軟件開發領域

2022-04-30 05:59:10

24小時熱門文章

最新文章

最新評論文章