博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe通信
阅读量:7187 次
发布时间: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

你可能感兴趣的文章
字节排序问题
查看>>
python3读取chrome浏览器cookies
查看>>
android 网络编程 HttpGet类和HttpPost类使用详解
查看>>
添加图片后xcode报错:resource fork, Finder information, or similar detritus not allowed
查看>>
CSS-背景渐变的兼容写法
查看>>
正则表达式--列表
查看>>
Unity3D占用内存太大的解决方法
查看>>
BootStrap框架及其他框架布局技术
查看>>
LOJ #2183「SDOI2015」序列统计
查看>>
k8s常用命令
查看>>
树的子结构
查看>>
FCKeditor中的回车换行和制表符缩进
查看>>
筛选出sql 查询结果中 不包含某个字符
查看>>
vi编辑器使用
查看>>
马踏棋盘
查看>>
Spring Maven 安装环境配置
查看>>
上下文切换查看 & sar
查看>>
queue-reconstruction-by-height
查看>>
android 得到连接热点的ip的方法
查看>>
Redis 安装 与 使用
查看>>