1. 程式人生 > >跨域 二

跨域 二

bsp 共享 窗口 pro var 主頁 received res tms

1.document.domain跨域

場景:http://a.xxx.com/A.htm 的主頁面有一個<iframe src="http://b.xxx.com/B.htm"></iframe>,兩個頁面的js如何進行交互?

這種跨子域的交互,最簡單方式就是通過設置document.domain。

只需要在A.htm與B.htm裏都加上這一句document.domain = ‘xxx.com‘,兩個頁面就有了互信的基礎,而能無礙的交互。

實現方式簡單,並且主流瀏覽器都支持IE6+、Firefox、Chrome等.

適用:同一個主域名下,不同子域之間的交互。

用法:a頁面

技術分享

b頁面

技術分享

2.使用window.name window對象有個name屬性,即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的, 每個頁面對window.name都有讀寫的權限,window.name是持久存在一個窗口載入過的所有頁面中的,並不會因新頁面的載入而進行重置。 用法:a頁面
<script>
    function setwindowname()
    {
        window.name=‘a頁面設置的‘;
        window.location.href="http://172.16.103.22/kuayu/6window.name.html";
    }
</script>
<body>
   
    <button onclick="setwindowname()">
        click window.name
    </button>
</body>

b頁面

<script>
    alert(window.name);
</script>
<body>
</body>

這樣a頁面設置的值傳入到了b頁面。

3. html5 window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引進的特性,可以使用它來向其它的window對象發送消息,無論這個window

對象是屬於同源或不同源,目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。

調用postMessage方法的window對象是指要接收消息的那一個window對象,該方法的第一個參數message為要發送的消息,類型只能為字符串;

第二個參數targetOrigin用來限定接收消息的那個window對象所在的域,如果不想限定域,可以使用通配符 * 。

需要接收消息的window對象,可是通過監聽自身的message事件來獲取傳過來的消息,消息內容儲存在該事件對象的data屬性中。

用法:a頁面

<body>
    <div style="width:300px;height:200px;">
        <iframe id="proxy" src="http://172.16.103.22/kuayu/5postMessage.html" style="display: block"></iframe>
    </div>
    <button onclick="postMsg()"> click</button>
    <script type="text/javascript">
        var obj = {
            msg: ‘this is come page  a ‘
        }
        function postMsg() {
            var iframe = document.getElementById(‘proxy‘);
            var win = iframe.contentWindow;
            win.postMessage(obj, ‘http://172.16.103.22‘);
        }
    </script>
</body>

b頁面:

  <script type="text/javascript">
        window.addEventListener(‘message‘, function (event) {
            console.log(‘received response:  ‘, event.data);
            var ps = document.getElementById(‘pid‘);
            ps.textContent = event.data.msg;
            console.log(ps);
        }, false);
</script>

b頁面可以接收到a頁面的消息。

此外還有通過 flash 、服務器是指代理、img等方法實現。

跨域 二