在iframe使用中关于数据传递的一些问题

Object 发布于2019-08-19 14:26 / 2888人阅读

摘要：之前很少使用这个标签，因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了用来嵌入其他页面，由于懒所以只好看看如何在的标签下传递数据。在父页面中使用函数来向子页面发送消息而在子页面中添加这个来接受消息。

之前很少使用IFRAME这个标签，因为感觉到父子页面之间传递数据不太方便。最近同事做的一组页面中大量的使用了IFRAME用来嵌入其他页面，由于懒,所以只好看看如何在IFRAME的标签下传递数据。

在网上找了找相关的资料，方法确实不少，这里只说我实际用到过的两种方法：
1. 在子页面中用parent属性也引用父页面的内容,但是好像只在IE中能够使用，在CHROME和Firefox始终没有反应。
2. 在父页面中使用document.getElementById("test").contentWindow.postMessage(message, "*");函数来向子页面发送消息；而在子页面中添加window.addEventListener("message", onmessage, false);这个Listener来接受消息。不过在这种方法中值得注意的一点是，最好能将发送消息的postMessage函数包含在$("#test").load(function(){});中，因为如果不使用load的话，很有可能消息在子页面的Listener添加之前就发送出去了，那么子页面是无法接受到任何消息的。

服务器托管混合云 php中关于的运算 iframe载入数据问题 iframe的使用用法 webrtc在webview中使用问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77975.html

彻底弄懂跨域问题

摘要：用于告知浏览器可以将预先检查请求返回结果缓存的时间，在缓存有效期内，浏览器会使用缓存的预先检查结果判断是否发送跨域请求。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

rose 2019-07-25 14:36 评论0 收藏0
彻底弄懂跨域问题

摘要：浏览器同源策略我们为何要研究跨域问题因为浏览器的同源策略规定某域下的客户端在没明确授权的情况下，不能读写另一个域的资源。跨域，老生常谈的问题简述作为一只前端菜鸟，跨域方面只懂得JSONP和CORS，并未曾深入了解。但随着春招越来越近，就算是菜鸟也要猛振翅膀。近几日仔细研究了跨域问题，写下这篇文章，希望对开发者们有所帮助。在读本文前，希望您对以下知识略有了解。浏览器同源策略 n...

CoorChice 2019-08-23 14:41 评论0 收藏0
H5与Native交互之JSBridge技术

摘要：一原理篇下面分别介绍和与的底层交互原理在讲解原理之前，首先来了解下的组件，先来看一下苹果官方的介绍上面的意思是说是一个可加载网页的对象，它有浏览记录功能，且对加载的网页内容是可编程的。做过混合开发的很多人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包了一层Native，然后通过Bridge技术使得js可以调用视频、位置、音频等功能。本文就是介绍这层Bridge...

zacklee 2019-08-20 18:19 评论0 收藏0
postMessage处理iframe 跨域问题

摘要：四传递信息给父页面参考跨域子页面传给父页面父页面代码崔涣测试父页面参数中有属性，就是父窗口发送过来的数据把父窗口发送过来的数据显示在子窗口中。五简单分析和安全问题传送过来的信息如下图，几乎包含了所有应该有的信息。背景：由于同源策略存在，javascript的跨域一直都是一个棘手的问题。父页面无法直接获取iframe内部的跨域资源；同时，iframe内部的跨域资源也无法将信息直接传递给...

cooxer 2019-08-19 17:42 评论0 收藏0