首页 > 代码库 > 跨域 二

跨域 二

2024-11-17 12:39:39   203人阅读

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等方法实现。

 

跨域 二


联系
我们