关于iframe向父页面传值

最新推荐文章于 2023-12-22 11:15:55 发布
最新推荐文章于 2023-12-22 11:15:55 发布
阅读量904 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/colly_wyx/article/details/52325277
本文探讨了解决多层iframe环境下父页面方法调用失效的问题。通过具体案例分析，指出在多层嵌套iframe场景下，常规的parent对象指向会失效，并提供了一种有效的解决方案。

昨天同事问了个iframe传值问题，开始就是用常用的方式进行操作，父类写个方法，子类调用，但在本次项目中却失效了，以为是用了layer弹窗控件的干扰，后来自己一想不对，因为我们的项目是后台是iframe的，iframe调了子页，子页中再调用了layer创建一个新iframe, parent这样取父页方法就失效了，

以下为在iframe中跟踪的parent

window 11是我们需要的，直接给parent[2]即可调用了。。。

Colly007
关注
使用iframe的父子页面进行简单的相互传值
time141的博客
09-02 7260
使用iframe标签嵌套页面时，通过再父页面通过接口请求的数据，如何传给子页面呢？作为一个刚刚入门的前端小白，只有边百度边写demo，研究一下iframe的父子页面的传值，如果有什么不对的地方请大家指出。 父页面：father.html,子页面:son.html 1、 ...
JS中Iframe之间传值及子页面与父页面应用
01-19
在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：1.在iframe子页面中获取父页面的元素： a>window.parent.document这个是获取父页面document中的对象； b>如果要获取父页面js中的方法：window.parent.xxxx()；xxxx()为方法； 2.在父页面中获取iframe子页面中的元素： a> 代码如下: var child = document.getElementByIdx_x(“mainFrame”).contentWindow;//mainFrame这个id是父
iframe与父页面传值(方法互调)
05-29
NULL 博文链接：https://skying007.iteye.com/blog/1044069
iframe与父页面传值
huhu2007的专栏
06-27 510
最近做的项目中用到了不少iframe，而且需要实现： 从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值。 在网上查询了相关东西，后总结如下： （1）父页面获取iframe中的元素值： [code="js"] //根据iframe的id获取对象 var i1 = window.frames['iframeId']; //var iframe =wi...
iframe子页面和父页面如何传值通信
znbb_的博客
07-08 1万+
业务场景，在index.html的主页面中，我们希望嵌套子页面，这时候就涉及到父子页面的通信问题。 以下的都是在同域的基础上的： 1.相互获取dom元素 1.1 在父页面获取子页面的dom元素： document.getElementById('iframe_id).contentWindow.document.getElementById('domId'); //先获取ifr...
iframe 子页面传值给父页面
Sensation_cyq的博客
02-24 3468
子页面 <body> 子级：B页面<br/> <button id="b_button">B页面发送A页面数据</button><br/> <script> document.getElementById("b_button").onclick = function(){ var param = {'name':'admin'}; window.parent.p
vue项目使用 iframe 父子页面传值。
weixin_45665171的博客
09-18 2097
vue项目使用 iframe 父子页面传值。
iframe子向父传值实例.rar
06-03
总的来说，`iframe`子向父页面传值是一个常见的需求，尤其是在处理跨域问题时。通过学习和实践这个实例，开发者不仅可以掌握一种实用的技术，还能加深对Web安全和浏览器限制的理解，提升自己的开发技能。
layer弹出子iframe层父子页面传值的实现方法
12-10
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下： 父页面获取子页面元素 格式： $("#iframeID").contents().find("#eleID") 示例代码： father.html <!DOCTYPE html> <...
iframe父向子传值实例.rar
06-03
然而，由于浏览器的同源策略限制，`iframe`内的页面与包含它的父页面在不同源时，不能直接访问彼此的DOM或JavaScript变量，这就引出了"iframe父向子传值"的问题。 在标题"iframe父向值实例.rar"和描述中提到的解决...
关于使用iframe的父子页面进行简单的相互传值
最新发布
12-22 770
当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？父页面是parentPage.html，子页面是childPage.html。1、情况一：父页面获取子页面传入的数据（子页面给父页面传值）2、情况二：子页面获取父页面的数据（父页面给子页面传值）关于使用iframe的父子页面进行简单的相互传值。子页面childPage.html。
iframe传数据给父层页面
caishijian2008的专栏
12-30 1453
window.parent.get_fenxiao(data) // 此处是父层页面的方法。console.log('get_fenxiao=',data) // 打印数据。url: "post的url地址",
iframe 传接值 父页面 子页面 传值
萝卜的专栏
03-25 1322
father.html   New Document <!-- function test2() { var ifrObj=window.frames["ifr"].document; //var txt=ifrObj.getElementById
iframe 父子之间的传值
bamboolm的博客
11-17 1430
iframe 父子之间的传值
多种方案教你实现iframe嵌套页面相互传参(父子通信)
热门推荐
tangdou369098655的博客
06-30 3万+
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？接收postMessage方的怎么用呢？postMessage方法有三个参数。欢迎大家指出文章需要改正之处~iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。iframe页面添加代码。一起来看一下效果吧~
iframe与父元素之间的传值方式
赵又又的博客
09-23 2852
1、iframe向父元素传值 iframe中的代码 var height = calcPageHeight(document); window.parent.postMessage({ message: 'getCrossHeight', height, }, '*'); 父元素监听 window.addEventListener('message', function(e){ if (e.data.message === 'getCrossHeight') { let
iframe 父子页面之间传值
cc
01-24 1199
1.父页面给子页面传值 父页面 /** * 发送消息 * @key 字段名 * @value 值 */ postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, ifra
跨域问题解决方案：iframe子向父传值实例分享
资源摘要信息: "iframe子向父传值实例.rar" 介绍了一个实现 iframe 中子页面向父页面传递数据的技术方案，该方案在一定程度上解决了跨域问题。当两个不同域的页面间需要进行数据交换时，直接的跨域通信会受到浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值