欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

postMessage的兩種使用方式

 更新時間:2022年12月31日 09:37:31   作者:zyfen  
這篇文章主要介紹了使用postMessage實現(xiàn)iframe跨域通信,第一種使用postMessage在irfame中實現(xiàn)跨域數(shù)據(jù)傳遞,第二種使用postMessage在window.open()中的使用,本文結合示例代碼給大家詳細講解,需要的朋友跟隨小編一起看看吧

一、使用postMessage在irfame中實現(xiàn)跨域數(shù)據(jù)傳遞

1、父頁面內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>主頁面</h1>
        <iframe id="child" src="http://10.0.0.159:8080"></iframe>
        <div>
            <h2>主頁面跨域接收消息區(qū)域</h2>
            <div id="message"></div>
        </div>
    </body>
    <script>
        /* -------------iframe跨域數(shù)據(jù)傳遞--------------- */
        
        //傳遞數(shù)據(jù)到子頁面
        window.onload = function() {
            document.getElementById('child').contentWindow.postMessage("主頁面消息", "http://10.0.0.159:8080")
        }
        //接受子頁面?zhèn)鬟f過來的數(shù)據(jù)
        window.addEventListener('message', function(event) {
            document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data;
        }, false);
    </script>

</html>

2、子頁面

(我這里在在vue頁面里做的測試,vue模板的html代碼就不展示了)

mounted() {

            //接收父頁面?zhèn)鬟^來的數(shù)據(jù)
            window.addEventListener('message', function(event) {    
                
                // 處理addEventListener執(zhí)行兩次的情況,避免獲取不到data
                // 因此判斷接收的域是否是父頁面
                if(event.origin.includes("http://127.0.0.1:8848")){
                    console.log(event);
                    document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data;
                                        
                    //把數(shù)據(jù)傳遞給父頁面 > top.postMessage(要傳遞的數(shù)據(jù),父頁面的url訪問地址)
                    top.postMessage("子頁面消息收到", 'http://127.0.0.1:8848/boatStaticHtml/iframe%E9%80%9A%E4%BF%A1.html');                
                }
            }, false);    

        }

3、效果圖展示

二、postMessage在window.open()中的使用

1、第一種方式,兩個頁面之前數(shù)據(jù)的相互傳遞

父頁面:parent.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

        function openWin() {
            var params = new Array();
            params[0] = new Array("params1", "aaaaaa");
            params[1] = new Array("params2", "bbbbbb");

            var popupwin = window.open("child.html");
            //onload只能執(zhí)行一次,也就是如果子窗口有onload事件,可能會覆蓋。
            popupwin.onload = function(e){
                popupwin.postMessage(params, "http://127.0.0.1:8848/");
            }
                        
            popupwin.onunload = function(e){
                var val = popupwin.returnValue;
                alert(val);
            }
        }

    </script>
</head>
<body>
<input type="button" value="打開新頁面" onclick="openWin()" />
</body>
</html>

子頁面:child.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>popup window</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script language="javascript" type="text/javascript">
    function closeWin() {
        window.returnValue = true;
        window.close();
    }
 
    document.onreadystatechange = function(e)
    {
        if (document.readyState === 'complete')
        {
            window.addEventListener('message', function(e){
                var params = e.data;
                $('#params1').text(params[0][1]);
                $('#params2').text(params[1][1]);
            });
        } 
    };
</script>
</head>
<body>
<h3>Parameter params1: <b id="params1"></b></h3>
<h3>Parameter params2: <b id="params2"></b></h3>
<div><input type="button" value="Return Value" onclick="closeWin()" /></div>
</body>
</html>

效果如下:

2、第二種方式:

//-----父頁面------
//打開新頁面
window.open();
//監(jiān)聽新頁面?zhèn)鬟f過來的數(shù)據(jù)
window.addEventListener('message', function(event) {
    console.log(event.data);
}, false);


//子頁面數(shù)據(jù)傳遞方式,這個方式需要通過事件來傳遞
setTimeout(function(){
    window.opener.postMessage({ isColse: 'ok' }, '*');
},2000)

到此這篇postMessage的兩種使用方式的文章就介紹到這了,更多相關postMessage iframe跨域通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • JavaScript轉換農歷類實現(xiàn)及調用方法

    JavaScript轉換農歷類實現(xiàn)及調用方法

    農歷是日常生活中不可或缺的一部分,它與人類的生活息息相關,從某種程度上說,它一直伴隨著我們,今天的任務是JavaScript轉換農歷類的實現(xiàn),感興趣的你可以千萬不要錯過,希望本文對你有所幫助
    2013-01-01
  • JavaScript閉包函數(shù)訪問外部變量的方法

    JavaScript閉包函數(shù)訪問外部變量的方法

    這篇文章主要介紹了JavaScript閉包函數(shù)訪問外部變量的方法,本文使用匿名函數(shù)來實現(xiàn)在閉包中訪問外部變量,需要的朋友可以參考下
    2014-08-08
  • Mac下使用charles遇到的問題以及解決辦法

    Mac下使用charles遇到的問題以及解決辦法

    本文主要介紹了Mac下使用charles遇到的問題以及解決辦法。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • Javascript模擬加速運動與減速運動代碼分享

    Javascript模擬加速運動與減速運動代碼分享

    這篇文章主要介紹了Javascript加速運動與減速運動代碼分享,需要的朋友可以參考下
    2014-12-12
  • JavaScript中二分查找的例題詳解

    JavaScript中二分查找的例題詳解

    二分查找在我們學習算法中是很重要的一部分,而且面試的時候會經(jīng)常的讓我們手寫一些算法。所以這篇文章將通過三個場景帶大家深入了解二分查找算法
    2023-03-03
  • JavaScript基礎之靜態(tài)方法和實例方法分析

    JavaScript基礎之靜態(tài)方法和實例方法分析

    這篇文章主要介紹了JavaScript基礎之靜態(tài)方法和實例方法,簡單分析了javascript靜態(tài)方法及實例方法的定義、使用相關操作技巧與注意事項,需要的朋友可以參考下
    2018-12-12
  • javascript 在firebug調試時用console.log的方法

    javascript 在firebug調試時用console.log的方法

    當你使用console.log()函數(shù)時,下面的firebug一定要打開,不然這函數(shù)在用firefox運行時無效且影響正常程序,如果用IE打開,將會出錯
    2012-05-05
  • 認識延遲時間為0的setTimeout

    認識延遲時間為0的setTimeout

    由 John Resig 的 How JavaScript Timers Work 可以知道,現(xiàn)有的 JavaScript 引擎是單線程處理任務的。它把任務放到隊列中,不會同步去執(zhí)行,必須在完成一個任務后才開始另外一個任務。
    2008-05-05
  • 如何解決日期函數(shù)new Date()瀏覽器兼容性問題

    如何解決日期函數(shù)new Date()瀏覽器兼容性問題

    這篇文章主要介紹了如何解決日期函數(shù)new Date()瀏覽器兼容性問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-09
  • JavaScript學習筆記之取值函數(shù)getter與取值函數(shù)setter詳解

    JavaScript學習筆記之取值函數(shù)getter與取值函數(shù)setter詳解

    這篇文章主要介紹了JavaScript取值函數(shù)getter與取值函數(shù)setter,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08

最新評論