跨域問題2

使用window.postmessage方法來跨域


Html5里有一個(gè)屬性window.postmessage也可以用來跨域:

postmessage(data,origin)有兩個(gè)參數(shù):

data: 要傳遞的數(shù)據(jù)岸军,html5規(guī)范中該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對(duì)象吃环,考慮到部分瀏覽器只能處理字符串參數(shù)设江,所以在傳遞參數(shù)的時(shí)候需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化煞抬,對(duì)postmessage()方法的支持度為IE8+混萝;

origin: 字符串參數(shù)狱杰,指明目標(biāo)窗口的源屹耐;設(shè)置為* 則為通配,這樣可以傳遞給任意窗口臼膏,如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"

例如有兩個(gè)頁面:

http://test.com/index.html

http://receive.com/index.html

http://test.com/index.html中發(fā)送信息:

<script>

var obj= {

key: 'values'

}

window.onload=function(){

win.postMessage(obj,'http://receive.com/index.html');

}

</script>

然后再在http://receive.com/index.html中接受消息硼被,渲染顯示:


window.onmessage=function(e){

if(e.origin !== 'http://test.com/index.html') return; //做一下安全性判斷,看看消息是否是由可信源頭發(fā)送

console.log(e.origin+' '+e.data.key); //接受跨域數(shù)據(jù)渗磅,渲染

}

//http://test.com/index.html values

window.postmessage()也可用在iframe的通信中嚷硫,例如(該實(shí)例來源于:http://www.cnblogs.com/dolphinX/p/3464056.html):

<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
    <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <div id="color">Frame Color</div>
    </div>
    <div>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    </div>

    <script type="text/javascript">

        window.onload=function(){
            window.frames[0].postMessage('getcolor','http://lslib.com');
        }

        window.addEventListener('message',function(e){
            var color=e.data;
            document.getElementById('color').style.backgroundColor=color;
        },false);
    </script>
</body>
</html>

http://test.com/index.html
<!doctype html>
<html>
    <head>
        <style type="text/css">
            html,body{
                height:100%;
                margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;">
        <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
            click to change color
        </div>
        <script type="text/javascript">
            var container=document.getElementById('container');
            window.addEventListener('message',function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,'*');
            },false);
            function changeColor () {            
                var color=container.style.backgroundColor;
                if(color=='rgb(204, 102, 0)'){
                    color='rgb(204, 204, 0)';
                }else{
                    color='rgb(204,102,0)';
                }
                container.style.backgroundColor=color;
                window.parent.postMessage(color,'*');
            }
        </script>
    </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末检访,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子仔掸,更是在濱河造成了極大的恐慌脆贵,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件起暮,死亡現(xiàn)場(chǎng)離奇詭異卖氨,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)负懦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門筒捺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人纸厉,你說我怎么就攤上這事系吭。” “怎么了残腌?”我有些...
    開封第一講書人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵村斟,是天一觀的道長(zhǎng)贫导。 經(jīng)常有香客問我抛猫,道長(zhǎng),這世上最難降的妖魔是什么孩灯? 我笑而不...
    開封第一講書人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任闺金,我火速辦了婚禮,結(jié)果婚禮上峰档,老公的妹妹穿的比我還像新娘败匹。我一直安慰自己,他們只是感情好讥巡,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開白布掀亩。 她就那樣靜靜地躺著,像睡著了一般欢顷。 火紅的嫁衣襯著肌膚如雪槽棍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評(píng)論 1 297
  • 那天抬驴,我揣著相機(jī)與錄音炼七,去河邊找鬼。 笑死布持,一個(gè)胖子當(dāng)著我的面吹牛豌拙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播题暖,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼按傅,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼捉超!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起唯绍,我...
    開封第一講書人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤狂秦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后推捐,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體裂问,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年牛柒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了堪簿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡皮壁,死狀恐怖椭更,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蛾魄,我是刑警寧澤虑瀑,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站滴须,受9級(jí)特大地震影響舌狗,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扔水,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一痛侍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧魔市,春花似錦主届、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至将宪,卻和暖如春绘闷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背涧偷。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工簸喂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人燎潮。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓喻鳄,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親确封。 傳聞我的和親對(duì)象是個(gè)殘疾皇子除呵,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容

  • Section1再菊、為什么要跨域? 自古以來(1995年起)颜曾,為了用戶的信息安全纠拔,瀏覽器就引入了同源策略。那么同源策...
    qhaobaba閱讀 381評(píng)論 0 0
  • Section1泛豪、為什么要跨域稠诲? 自古以來(1995年起),為了用戶的信息安全诡曙,瀏覽器就引入了同源策略臀叙。那么同源策...
    不去解釋閱讀 551評(píng)論 0 0
  • 1. 什么是跨域? 跨域一詞從字面意思看价卤,就是跨域名嘛劝萤,但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘。具體概念如下:只要協(xié)議...
    他在發(fā)呆閱讀 822評(píng)論 0 0
  • 原文來自:http://www.ruanyifeng.com/blog/2016/04/same-origin-p...
    神秘者007閱讀 1,036評(píng)論 0 1
  • 1. 什么是跨域慎璧? 跨域一詞從字面意思看床嫌,就是跨域名嘛,但實(shí)際上跨域的范圍絕對(duì)不止那么狹隘胸私。具體概念如下:只要協(xié)議...
    w_zhuan閱讀 515評(píng)論 0 0