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

使用postMesssage()實現(xiàn)跨域iframe頁面間的信息傳遞方法

 更新時間:2016年03月29日 15:50:14   投稿:jingxian  
下面小編就為大家?guī)硪黄褂胮ostMesssage()實現(xiàn)跨域iframe頁面間的信息傳遞方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家一個參考。一起跟隨小編過來看看吧

由于web同源策略的限制,當(dāng)頁面使用跨域iframe鏈接時,主頁面與子頁面是無法交互的,這對頁面間的信息傳遞造成了不小的麻煩,經(jīng)過一系列的嘗試,最后我發(fā)現(xiàn)有以下方法可以實現(xiàn):

1. 子頁面url傳參

簡單說來就是把所有需要傳遞的參數(shù)加到與主頁面同源的url上,將子頁面重定向到該url,然后主頁面通過iframe的src獲取這些參數(shù)

過程非常復(fù)雜,不建議使用這種方法

2. postMessage()

postMesssage()是HTML5提供的一個基于事件的消息傳輸API,可以實現(xiàn)跨文本檔、多窗口、跨域消息傳遞。

postMessage(data,origin)方法接受兩個參數(shù)

 1.data:要傳遞的數(shù)據(jù),html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對象,然而并不是所有瀏覽器都做到了這點兒,部分瀏覽器只能處理字符串參數(shù),所以我們在傳遞參數(shù)的時候需要使用JSON.stringify()方法對對象參數(shù)序列化,在低版本IE中引用json2.js可以實現(xiàn)類似效果。

2.origin:字符串參數(shù),指明目標(biāo)窗口的源,協(xié)議+主機+端口號[+URL],URL會被忽略,所以可以不寫,這個參數(shù)是為了安全考慮,postMessage()方法只會將message傳遞給指定窗口,當(dāng)然如果愿意也可以建參數(shù)設(shè)置為"*",這樣可以傳遞給任意窗口,如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

發(fā)送消息(子頁面)

function sendMessage(param) {
  var url;
  if (param.url) {
    url = param.url;
  };
  var dataJson = JSON.stringify({
     type:1,  
    a: param.c,
    b: param.c,
    c: param.c,
    url: url
  });
  window.parent.postMessage(dataJson, '*');
}

由于部分瀏覽器只能處理字符串參數(shù),我們需要先使用JSON.stringfy()將參數(shù)轉(zhuǎn)換為字符串,然后再接收頁面使用JSON.parse()轉(zhuǎn)換回對象。

接收消息

 對于子頁面?zhèn)鬟f過來的參數(shù),我們可以通過監(jiān)聽window的message事件來獲?。?/p>

window.addEventListener('message', function(e) {
        var data = JSON.parse(e.data);
        switch (data.type) {
            case 1:
                alert(data.a);break;
        }
    }, false);

message事件有幾個重要屬性

1.data:顧名思義,是傳遞來的message
2.source:發(fā)送消息的窗口對象
3.origin:發(fā)送消息窗口的源(協(xié)議+主機+端口號)
通過postMesssage()方法和message事件就可以實現(xiàn)跨域傳遞消息了,需要注意的是,在demo中我們是通過子頁面向父頁面?zhèn)鬟f消息,所以使用的是window.parent發(fā)送,window接收:

window.parent.postMessage(dataJson, '*');如果是從主頁面向子頁面就需要對換,使用window發(fā)送,window.frames[0]來接收了。

以上這篇使用postMesssage()實現(xiàn)跨域iframe頁面間的信息傳遞方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • div模擬滾動條效果示例代碼

    div模擬滾動條效果示例代碼

    滾動條想必大家都見過吧,在本文將使用div來模擬滾動條的效果,具體實現(xiàn)如下,感興趣的朋友可以參考下
    2013-10-10
  • js跨域請求的5中解決方式

    js跨域請求的5中解決方式

    這篇文章主要介紹了js跨域請求的5中解決方式的相關(guān)資料,需要的朋友可以參考下
    2015-07-07
  • 用JavaScript對JSON進行模式匹配(Part 1-設(shè)計)

    用JavaScript對JSON進行模式匹配(Part 1-設(shè)計)

    在《從 if else 到 switch case 再到抽象》這篇文章里面說到,解決 if else 和 switch case 分支過多的一個方法,就是做一個專用的 dispatcher ,讓它來負(fù)責(zé)進行篩選與轉(zhuǎn)發(fā)。
    2010-07-07
  • JS遍歷樹層級關(guān)系實現(xiàn)原理解析

    JS遍歷樹層級關(guān)系實現(xiàn)原理解析

    這篇文章主要介紹了JS遍歷樹層級關(guān)系實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-08-08
  • LayUI表格批量刪除方法

    LayUI表格批量刪除方法

    今天小編就為大家分享一篇LayUI表格批量刪除方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • js實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例

    js實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例

    下面小編就為大家?guī)硪黄猨s實現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11
  • uniapp微信小程序強制更新解決示例詳解

    uniapp微信小程序強制更新解決示例詳解

    這篇文章主要為大家介紹了uniapp微信小程序強制更新解決的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • js防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充詳解

    js防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充詳解

    這篇文章主要介紹了防抖-節(jié)流函數(shù)的基本實現(xiàn)和補充,文章從基礎(chǔ)概念到手寫對防抖-節(jié)流函數(shù)的實現(xiàn)進行講解,內(nèi)容詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-01-01
  • 正則表達式,替換所有HTML標(biāo)簽的簡單實例

    正則表達式,替換所有HTML標(biāo)簽的簡單實例

    下面小編就為大家?guī)硪黄齽t表達式,替換所有HTML標(biāo)簽的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-11-11
  • JavaScript中valueOf函數(shù)與toString方法深入理解

    JavaScript中valueOf函數(shù)與toString方法深入理解

    基本上,所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個方法,null除外。它們倆解決javascript值運算與顯示的問題,本文將詳細介紹,有需要的朋友可以參考下
    2012-12-12

最新評論