当前位置: 首页 > 编程笔记 >

通过伪协议解决父页面与iframe页面通信的问题

闾丘鸣
2023-03-14
本文向大家介绍通过伪协议解决父页面与iframe页面通信的问题,包括了通过伪协议解决父页面与iframe页面通信的问题的使用技巧和注意事项,需要的朋友参考一下

我们经常会有父页面与iframe页面的操作,比如

<iframe id = "iframe"></iframe>

这个iframe里面的内容是js写的。如以下代码

var iframe = document.getElementById("iframe"),
  doc = iframe.contentWindow.document;
doc.open();
doc.write("---------something------");
doc.close();

以上代码在大多数情况下是对的。但有种情况,即父页面显式的写了document.domain = "xxx";

在ie系列(IE10没试过)会出现没权限的错误。 而在firefox, chrome都没问题.

这是为什么呢?这是ie的一个bug, 即父页没有显式的设置document.domain时,iframe会默认document.domain与父页面一致,即都是

location.host,父子页面是可以进行通信,即文章头的例子, 但当父页面显式的设置了document.domain="", iframe里面的页面必须也显式的设置document.domain="xxx",否则是

没有权限得到iframe.contentWindow.document的, 即也没办法去动态写内容,其实也可以让iframe指向一个特定的页面,这个页面显式的设置document.domain="xxx",再通过文章开头的方

的方式来写,但问题是我的父页面有很多这样的iframe,个数是未知的(都是广告位),所以也不能通过特定页面。

这样问题就来了,在这种情况下,我们貌似没有办法

1. 父页面设置了并且必须会显式的设置document.domain

2.iframe页面的内容需要js动态生成。

3.没有机会为iframe设置src。

但上面3个条件都满足时,我们可以通过伪协议来解决此类的问题。


iframe.src="javascript:void((function(){var d=document;d.open();d.domain='xxx;d.write('---something');d.close()})())";

通过这种方式可以显式的设置iframe的document.domain与父页面一致。

这样写了后,的确实现了动态写iframe内容的需求,但这个页面会单独弹出来,像window.open();
这是为什么呢? 这也是ie系列的bug ,即父页面有<base target="_blank"></base>, 通过iframe的伪协议所写的内容会类似window.open一样弹出新页面,
但父页面的<base>又必须是_self, 所以只能在调用iframe.src之前将base的target设置为_self, 内容写完后,再将base的target设为_blank

这样就解决了此问题。

虽然伪协议可以解决此问题,但也有些风险,如果不到万不得已,也别随便用这种方式。

 类似资料:
  • Service Worker 没有直接操作页面 DOM 的权限,但是可以通过 postMessage 方法和 Web 页面进行通信,让页面操作 DOM。而且这种通信可以是双向的,类似于 iframe 之间的通信。下面就给大家介绍 postMessage 在项目中的一些使用场景。注意下面的前提是浏览器支持 Service Worker。 下文的 service-worker.js 文件,简称为 sw

  • 本文向大家介绍微信jssdk在iframe页面失效问题的解决措施,包括了微信jssdk在iframe页面失效问题的解决措施的使用技巧和注意事项,需要的朋友参考一下 项目需求 微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行

  • react-native项目中使用react-native-webview嵌入vue页面,两种方式,在不同机型上无效. 方式一:直接使用window.postMessage(例如在 vivo z3手机(android9) 上vue页面监听方法不执行) 方式二:使用window.WebViewBridge.onMessage(例如在 小米手机(android13) 上vue页面监听方法不执行) 以上

  • 本文向大家介绍关于Iframe父页面与子页面之间的相互调用,包括了关于Iframe父页面与子页面之间的相互调用的使用技巧和注意事项,需要的朋友参考一下 iframe元素就是文档中的文档。 window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象。但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个w

  • 本文向大家介绍iframe父页面如何获取子页面的元素?相关面试题,主要包含被问及iframe父页面如何获取子页面的元素?时的应答技巧和注意事项,需要的朋友参考一下 在父页面监听 onmessage,子页面 postMessage。 $('iframe')[0].contentWindow.document.getElementById document.frames['xx'].document.

  • 1.1 OCTO协议 + Thrift协议 美团内部服务间使用OCTO私有协议进行通信,OCTO协议具备良好的扩展性,如下是协议格式: 2Byte 1Byte 1Byte 4Byte 2Byte header length Byte body length Byte 4Byte(可选) magic version protocol total length header length header