博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe通信
阅读量:7168 次
发布时间:2019-06-29

本文共 1299 字,大约阅读时间需要 4 分钟。

直奔主题 

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上的方法 使用起来也非常方便 下面给个简单例子

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

你可能感兴趣的文章
monogodb3.4安装修改,权限设置
查看>>
“尸体解剖”报告
查看>>
利用Underscore求数组的交集、并集和差集
查看>>
一行神奇的 javascript 代码
查看>>
Django&Admin站点&使用Admin站点
查看>>
CentOS中文乱码问题的解决方法
查看>>
R语言-线性回归(1)
查看>>
python14期2017.7.10
查看>>
servlet的运行机制,转发和重定向
查看>>
discuz首页设置默认地址不带forum.php后缀的方法
查看>>
Winform 串口通讯之读卡器
查看>>
解决手机网页字段过长导致页面混乱
查看>>
extjs使用笔记-21
查看>>
Android中的布局(layout)
查看>>
第 5 章 Nova - 024 - Nova 组件如何协同工作
查看>>
python制作爬虫并将抓取结果保存到excel中
查看>>
快速手工实现软件著作权源码60页制作
查看>>
Super Pi-计算10000位圆周率需要多少时间?
查看>>
第九周项目1-复数类中的运算符重载(续)
查看>>
PHP实现url参数组合字符串与数组相互转换
查看>>