iframe通信-优快云博客

本文深入探讨了跨域通信技术的核心概念，并通过实际案例展示了如何在不同浏览器环境下实现跨域通信，包括古董浏览器（如IE6/7/8）的解决方案和现代浏览器（如IE8+）使用的postMessage技术。详细介绍了postMessage的用法、注意事项及其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直奔主题

1 http://miku.com/a & http://miku.com/b

2 http://miku.com/a & http://rin.miku.com/b

3 http://localhost:8888/a & https://b

如上

只有第一种情况完全没有跨域问题能顺畅访问

第二种情况因为主域名相同所以可以对它们同时设置相同的域名后缀domin 可以解决跨域问题

第三种情况协议端口域名都不相同！（下面讨论）

对于古董浏览器（如 ie6 7 8 ）一种解决方案

父->子可在hash上传递或者信息直接放到url上 hash传的可通过hashchange监听

子->父需要个代理iframe(没有跨域问题) 代理iframe是隐藏在子中的这个iframe可以拿到parent的一系列属性方法

对于正常人（排除银行人员）的浏览器 postMessage （ie8+）解决方案

来张浏览器占用情况！！！

可以看到ie越来越少相信大多数都是ie8+的可以用poseMessage！

postMessage 是window上的方法使用起来也非常方便下面给个简单例子

<!--http://127.0.0.1/-->
    <iframe id="ife" src="http://miku.com" ></iframe>

with(document.getElementById('ife'))
            onload = function(){ 
                 contentWindow.postMessage('萌！','*');
             };
        onmessage = function(e){
            e = e || event;
            alert(e.data); //你也萌！
        }

//http://miku.com
        onmessage = function(e){
            e = e || event;
          alert(e.data); //萌
          e.source.postMessage('你也萌！','*');
        };

miku.com 弹出 '萌！' 之后 127.0.0.1 弹出 '你也萌！'

postMessage 第一个参数是需要发送的消息第二个就是接受者的源这里暴力的写为'*' 当然也可以给出具体的值

x.contentWindow.PostMessage可理解为用来触发x.contentWindow.onmessage的就像订阅发布一样

在这个例子中双方都监听了并且也互相发送了消息非常的简单。

*坑

postMessage 第一个参数在ie10和现代浏览器中我们是可以传递对象的但是在ie8中就算传了过去 [object object] 也并不可以获取到值！

所以当要传json对象的时候最好先序列化为字符串接收到以后我们再解析它！

转载于:https://www.cnblogs.com/daidaidai/p/5548234.html