摘要:注意事项该属性返回窗口中所有命名的框架。跨域未跨主域尝试。所以有人把叫一级域名这是错误的。报错图兼容性监听方可以获得父级对象必须是同域检查的发送页面的源。四路由变化以及前进后退。
探索Iframe
本文目的:
Iframe简单使用
Iframe跨域
Iframe常见问题
和平时使用的DOM标签类似,样式之类的还是建议用class吧,统一起来方便管理。
更多属性看:http://www.runoob.com/tags/ta...
3.常用事件:一般用这个就够了
onload:当文档加载时运行脚本
document.querySelector("#Yiframe").onload = function(event){ console.log("onload",event); }二.JS动态新增并插入Iframe
和平时新增DOM标签一样即可。
var iframe = document.createElement("iframe"); iframe.src = url; iframe.id = "Yiframe"; iframe.style="height: 100%;width: 100%;border: 0;"; $(".content").append(iframe);三.iframe与父页面互动 1.注意事项
(1). 必须是在两者同域的情况下才能进行数据交互。
(2). 中间无论嵌套几次iframe,只要其中一个iframe与上级或者上上级同域,两者之前就能进行相互调用
2.实现方案(同域) (1).父页面获取子页面document.querySelector("#XXXX").contentWindow window.frames[x]
可以获取到iframe内的window对象,包括iframe内自行声明的全局方法等。
该属性返回窗口中所有命名的框架(
直接打印window.frames不是数组对象。
frames.length 来获取框架的数量。
可以通过window.frames[数字]直接获取iframe内的window对象。
(2).子页面获取父页面window.parent
可以获取到父页面的window对象,包括父页面内自行声明的全局方法等。
3.跨域(未跨主域)(1).尝试。
打印 document.querySelector("#XXXX").contentWindow 和 window.parent 可以看到里面的属性和方法(第一层/第二层)。 但关键数据和方法会被和谐。
(2).修改document.domain实现跨域通信
网上搜到这个方法,但自己尝试的时候总会报错:
VM301:1 Uncaught DOMException: Failed to set the "domain" property on "Document": "baidu.com" is not a suffix of "corp.dinghuo123.com". at:1:17
因为同源安全政策不能直接修改。
首先补充一个知识点,然后再讲解怎么使用。
知识点:
一级域名 有的人叫根域名,如:dinghuo123.com、baidu.com、xx.com.cn、xx.cn.net 等等。
二级域名 是指增加了一级,包括www。如:www.dinghuo123.com、corp.dinghuo123.com、agent.dinghuo123.com 等等。所以有人把www.dinghuo123.com叫一级域名这是错误的。
document.domain 可以修改 corp.dinghuo123.com、agent.dinghuo123.com 为同一个主域 dinghuo123.com,此时即可通过上面步骤三-2实现父子之间的通信。
但是跨主域的时候就不能用这个方法了。
4.跨域(跨主域) (1)方法otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow //其他窗口的一个引用, //(1)比如iframe的contentWindow属性、 //(2)执行window.open返回的窗口对象、 //(3)或者是命名过或数值索引的window.frames。 //(4)父级parent.window对象 message //将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。 //PS个人觉得若是对象尽量还是自行序列化吧避免出现什么奇怪的问题。 targetOrigin //通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。 //PS简单来说就是*的话对方无论是什么URL都会触发onmessage回调,如果不是就会报错(图片见下方) transfer //可选 //是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。 //PS这个不是很懂,后面有时间研究。
targetOrigin报错图
postMessage兼容性
window.onmessage = function(e){ console.log(e)} e.source //可以获得父级window对象(必须是同域) e.origin //检查postMessage的发送页面的源。(2)实践
父向子
//父: document.querySelector("#xx").onclick = function(){ window.frames[0].postMessage("testPost","*"); //document.querySelector("#Yiframe").contentWindow.postMessage("testPost","*"); 也可以 } //子: window.onmessage =function(e){ console.log("onmessage2",e,document.domain); }
子向父
//子: document.querySelector("#btn5").addEventListener("click",function(){ parent.window.postMessage("testChildPost","*"); }); //父: window.onmessage = function(e){ console.log("onmessage父",e) }
两个窗口:
理论上把window对象浏览器存储下再用上面的方式就能实现。未尝试。
(3)安全问题如果您不希望从其他网站接收message,请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。
如果您确实希望从其他网站接收message,请始终使用origin和source属性验证发件人的身份。 任何窗口(包括例如http://evil.example.com)都可以向任何其他窗口发送消息,并且您不能保证未知发件人不会发送恶意消息。 但是,验证身份后,您仍然应该始终验证接收到的消息的语法。 否则,您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。
当您使用postMessage将数据发送到其他窗口时,始终指定精确的目标origin,而不是*。 恶意网站可以在您不知情的情况下更改窗口的位置,因此它可以拦截使用postMessage发送的数据。
四.路由变化以及前进后退。控制台使用window.location.href会导致浏览器的url变化。
用户点击后退或者前进的时候,会根据之前的操作,完全依次复现(变化浏览器url和iframe内部页面路由变化)
window.history.go(xx) 和 window.history.back() ,无论在父页面还是在子页面中,使用的效果和浏览器的前进后退是一样的。
iframe中的页面使用window.location.href(和a标签)改变路由的时候不会引发浏览器url的变化,但会新增一条历史记录。
iframe每次重载,都会触发onload事件。
五.常见问题iframe内的路由变化,iframe的src值不会变!!!
要获取iframe内的当前url,用document.querySelector("#Yiframe").contentWindow.location.href;
parent.window 在没有父级的时候 parent.window = window;
参考资料SO JSON在线解析:http://www.sojson.com/blog/17...
浏览器同源政策: https://developer.mozilla.org...
postMessage:https://developer.mozilla.org...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50892.html
摘要:注意事项该属性返回窗口中所有命名的框架。跨域未跨主域尝试。所以有人把叫一级域名这是错误的。报错图兼容性监听方可以获得父级对象必须是同域检查的发送页面的源。四路由变化以及前进后退。 探索Iframe 本文目的: Iframe简单使用 Iframe跨域 Iframe常见问题 一.Iframe基本Dom以及常用属性和常用事件 1.DOM: 2.常用属性: 和平时使用的DOM标签类似,...
摘要:通常我们可以在后配置各种指定资源路径,有如果你未指定的话,则是使用规定的加载策略默认配置就是同域这里和有一点瓜葛的就是和就是用来指定的有效加载路径。 某大咖说: iframe是能耗最高的一个元素,请尽量减少使用某大牛说: iframe安全性太差,请尽量减少使用...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。 虽然,你们这样说的我竟无法反驳,但是ifram...
摘要:如何利用网页请求暴露出来的接口去抓取网页数据很多爬虫都能实现这个功能。跨域通信时,浏览器会报如下错误其实这两个问题都是由于跨域造成的。结果这些数据可以在请求成功会传回本地。 如何利用网页ajax请求暴露出来的接口去抓取网页数据?很多爬虫都能实现这个功能。不过今天要来和大家八一八单从前端的角度,利用js解决这个问题。 大家都知道,在不同域的情况下是不能发送ajax请求的,浏览器会报如下错...
摘要:数据仍然是通过页面获得,页面仅需向页面传递即可,页面拿到函数名,并通过传递从服务器拿到的数据,在页面执行页面的回调函数,回调函数执行完毕后移除页面以及该函数。以上是我所知道的解决跨域请求的两种方法。 iframe跨域的基本前提是,一个页面可以嵌套非同源站点的html文件,以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求。当一个域名为domain1下的页面A想要向...
阅读 2810·2021-09-22 15:20
阅读 2911·2021-09-22 15:19
阅读 3405·2021-09-22 15:15
阅读 2318·2021-09-08 09:35
阅读 2347·2019-08-30 15:44
阅读 2978·2019-08-30 10:50
阅读 3615·2019-08-29 16:25
阅读 1528·2019-08-26 13:55