iframe与父页面互相调用方法

最新推荐文章于 2025-09-18 09:03:04 发布
原创 最新推荐文章于 2025-09-18 09:03:04 发布 · 232 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #ViewUI

本文介绍如何使用原生JavaScript及jQuery实现不同窗体间的交互。内容涵盖父窗体与子窗体（iframe）之间的方法调用及元素访问。
原生JS方式

iframe调用父页面方法的 func1 方法：window.parent.func1('abc');

父页面调用iframe窗口的 fun2 方法 ：window.frames["west"].fun2('abc');

Jquery方式

同一个父页面下的两个iframe互相调用方法,iframe1调用iframe2的func3方法：

$("#iframe2",parent.document).get(0).contentWindow.func3();

父页面获取iframe页面的一个ID为username文本框标签: $(window.frames["west "].document).find("#username");

iframe获取父页面的标签$(window.parent.document).find("#username");
iteye_12865
关注
iframe子父窗口的相互调用
weixin_44037153的博客
05-26 4670
iframe在复合文档中经常用到，利用jquery操作iframe可以大幅提高效率，这里收集一些基本操作 doc方法：父窗口操作iframe：window.frames[“iframeSon”].document iframe操作父窗口: window.parent.document jquery方法:在父窗口中操作 选中iframe中的所有输入框： $(window.frames[“iframeSon”].document).find(“:text”); 在iframe中操作 选中父窗口中的所有输入框：$
解决同一页面中两个iframe互相调用jquery,js函数的方法
11-29
这一个月又没更新博客，唉，懒癌又犯了，今天解决了一个问题，关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下： <iframe width="100%" height="100%" name="left" scrolling="auto" ...
父窗口调用iframe子窗口方法
03-14
NULL 博文链接：https://terryang.iteye.com/blog/292913
layer.open关闭父窗口 以及调用父页面的方法
10-18
今天小编就为大家分享一篇layer.open关闭父窗口 以及调用父页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iframe页面的子父方法调用
最新发布
不积跬步，无以至千里
09-18 797
本文介绍了在Web开发中使用iframe嵌套页面时，父页面与子页面的交互方法。同源场景下可直接通过JavaScript访问对方的方法和变量；跨域时需使用postMessage进行安全通信。文章详细说明了同源和跨域情况下的具体实现方案，包括父页面调用iframe内方法、iframe调用父页面方法、消息发送与监听等，并提供了完整的代码示例。关键注意事项包括同源验证、加载时机处理、错误捕获和性能优化。通过合理运用这些技术，可以实现安全可靠的跨iframe交互。
Javscript调用iframe框架页面中函数的方法
09-04
主要介绍了Javscript调用iframe框架页面中函数的方法,可实现iframe之间传值或修改值,是非常实用的技巧,需要的朋友可以参考下
iframe父子窗口间js方法调用
leon
06-05 1万+
父窗口调用iframe子窗口方法 myFrame.window.functionName(); iframe子窗口调用父窗口方法parent.functionName();父窗口页面                  function say() {   alert("parent.html------>Im at parent.html");   }     funct
iframe中调用父窗口方法
一个后知后觉人路。。
08-09 1137
iframe中调用父窗口方法
iframe与父页面传值(方法互调)
05-29
本篇文章将深入探讨如何在`iframe`与父页面之间进行值的传递以及方法的互相调用。 首先，我们可以通过JavaScript的DOM（Document Object Model）接口来实现`iframe`与父页面之间的通信。在`iframe`内的页面，我们...
iframe中子父类窗口调用JS的方法及注意事项
10-23
在使用iframe进行Web开发时，经常会遇到需要在父窗口和嵌入的子iframe页面间相互调用JavaScript函数的场景。本文将详细介绍如何在iframe中实现子窗口与父窗口间的JavaScript方法调用以及在操作过程中需要注意的事项...
iframe父页面与子页面互相调用
05-08
### Iframe父页面与子页面互相调用 在Web开发中，经常需要用到iframe来嵌套显示其他页面。本文将通过一个具体的示例介绍如何实现iframe中的父页面与子页面之间的互相调用，以及子页面中再嵌套iframe时的相关操作。 ...
iframe调用父窗口的方法
我是传奇
03-02 988
同域情况下，子窗口调用父窗口的方法，提供信息 在iframe文件中定义方法 子窗口： 子窗口地址：b.damao.cn/b.html &lt;script&gt; function cancel(){ if(window.parent &amp;&amp; window.parent.testfunc){ window.parent.te...
iframe中父子窗口的调用
轮回韩的博客
03-21 1236
一、iframe标签详解<iframe src="1.html" frameborder="0" id="child"></iframe> 1.操作子窗口：frames['child'].contentDocument || frames['child'].document 2.操作父窗口：iframe.parent
iframe嵌套中调用父窗口js方法
cnhnslhs的博客
05-29 954
1、调用父窗口方法，直接使用window.parent，获取父窗口。 [code="java"]点击我调用父窗口方法[/code] 2、使用jquery改变父窗口的iframe最小高度 [code="java"]$(window.parent.document.getElementById("mainFrame")).css("minHeight","600px");[/code] ...
父页面调用iframe中的js方法
jokewangloveyou的专栏
04-11 4342
在父页面中调用ifame子页面中的js方法： 第一种知道方法名： window.frames["myContentIframeName"].getMyContent(); 第二种方法名是动态变的 eval("window.frames['" + iframeVar + "']." + methodName); 其中iframeVar 为要调用的iframe子页面中的iframe窗口的
在父页面调用iframe子页面的JS方法
热门推荐
heartbeaty的专栏
02-18 4万+
parent function parentFunction() { alert('function in parent'); } function callChild() { child.window.childFunction(); /* child 为iframe的name属性值， 不能为id，因为在FireFox下id不能获取iframe对象 */ }
iframe子窗口调用父窗口的方法与window.open打开新页面调用前窗口的方法
Ly250821的博客
10-15 577
iframe和window.open
iframe里面的页面调用父窗口,左右窗口js函数的方法
fly1206的博客
08-22 249
iframe里面的页面调用父窗口,左右窗口js函数的方法   iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法。 比如有A窗口，A内有个IFRAME B，B里面的装载的是C页面，这时C要直接调用A里面的一个自定义函数AFUN();那么只要在C页面中写如下JS函数就可以了：window.parent.AFUN()...
html iframe 子页面调用父页面的方法
yuxinSir的博客
07-21 610
还是附上代码吧。不多说，方便日后查看父页面代码：<!DOCTYPE html><html><head> <title>parents</title> <meta charset="UTF-8"></head><body><script language="javascript" type="text/jav...
在iframe子页面加载完成后调用方法
03-19
### 如何在 iframe 子页面 onload 完成后调用父页面方法 为了实现这一功能，可以利用 JavaScript 的 `window.onload` 和跨文档通信机制来完成。以下是具体的做法： #### 方法描述 当子页面（即嵌套在 `<iframe>` 中的内容）加载完成后，可以通过设置子页面中的 `window.onload` 事件监听器，在该事件触发时通过 `parent` 或 `window.parent` 对象访问并调用父页面的方法[^1]。 #### 实现方式 以下是一个具体的例子展示如何实现此需求： ##### 父页面 (main.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parent Page</title> <script type="text/javascript"> function parentMethod() { console.log('The child page has finished loading and called the method on the parent.'); } </script> </head> <body> <h1>This is the Parent Page</h1> <iframe id="myIframe" src="childPage.html"></iframe> </body> </html> ``` ##### 子页面 (childPage.html) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Page</title> <script type="text/javascript"> window.onload = function () { // 当子页面完全加载完毕后，调用父页面上的方法 if (window.parent && typeof window.parent.parentMethod === 'function') { window.parent.parentMethod(); } else { console.error('Parent method not found or inaccessible'); } }; </script> </head> <body> <h1>This is the Child Page</h1> </body> </html> ``` 在这个示例中，一旦子页面成功加载，它会自动检测是否存在名为 `parentMethod` 的函数，并尝试在其父窗口上调用这个函数[^4]。 #### 注意事项 - **安全性考虑**: 如果父子页面位于不同的域上，则可能受到同源策略的影响而无法互相访问对方的对象或属性。 - **错误处理**: 应始终检查目标对象及其成员的存在性和可访问性，以防止运行期异常发生[^3]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值