IFrame子窗口JS方法互相调用和传参

最新推荐文章于 2021-09-24 09:53:55 发布
最新推荐文章于 2021-09-24 09:53:55 发布
阅读量130 收藏
点赞数
文章标签： jQuery HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzlly999/article/details/83915025
版权
child1.html和child2.html都是父页面parent.html中的一个子iframe，请看child1.html如何调用child2.html中的方法。



--------------------------------------------------------------------------------
parent.html

view plaincopy to clipboardprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
</head>
<body>
<iframe id="myFrame1" src="child1.html" mce_src="child1.html"></iframe>
<iframe id="myFrame2" src="child2.html" mce_src="child2.html"></iframe>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
</head>
<body>
<iframe id="myFrame1" src="child1.html" mce_src="child1.html"></iframe>
<iframe id="myFrame2" src="child2.html" mce_src="child2.html"></iframe>
</body>
</html>



--------------------------------------------------------------------------------


child1.html

view plaincopy to clipboardprint?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
<mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript"><!--
function test1() {
window.parent.document.getElementById("myFrame2").contentWindow.test2();
}

// --></mce:script>
</head>
<body>
<input type="button" οnclick="test1();" value="test" />
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
<mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript"><!--
function test1() {
window.parent.document.getElementById("myFrame2").contentWindow.test2();
}

// --></mce:script>
</head>
<body>
<input type="button" οnclick="test1();" value="test" />
</body>
</html>


--------------------------------------------------------------------------------


child2.html

view plaincopy to clipboardprint?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
<mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript"><!--
function test2() {
alert("I am your brother");
}

// --></mce:script>
</head>
<body>
2
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery Cookie Plugin</title>
<mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>
<mce:script type="text/javascript"><!--
function test2() {
alert("I am your brother");
}

// --></mce:script>
</head>
<body>
2
</body>
</html>
mzlly999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 调用父窗口函数-iframe父窗口和子窗口相互的调用方法
37度2
06-01 4784
<br />　　iframe 父窗口和子窗口相互的调用方法集锦 一、父窗口调用iframe子窗口方法 <br />　　1、HTML语法：<iframe name="myFrame" src="child.html"></iframe> <br />　　2、父窗口调用子窗 口：myFrame.window.functionName(); <br />　　3、子窗品调用父窗 口：parent.functionName(); <br />　　简单地说,也就是在子窗口中调用的变量或函数前加个parent. 就行 <
iframe调用父页面js方法_JS高级技巧
weixin_36028876的博客
12-30 6538
本篇是看的《JS高级程序设计》第23章《高级技巧》做的读书分享。本篇按照书里的思路根据自己的理解和经验，进行扩展延伸，同时指出书里的一些问题。将会讨论安全的类型检测、惰性载入函数、冻结对象、定时器等话题。1. 安全的类型检测这个问题是怎么安全地检测一个变量的类型，例如判断一个变量是否为一个数组。通常的做法是使用instanceof，如下代码所示：let data = [1, 2, 3]; cons...
html vue.js elementui iframe 子页面调用父页面方法并传参
qq_35621335的博客
09-24 711
父页面 html 片段： <div class="emu_card_transverse_di_zdy emu_card_L"> <iframe id="emucardifrswi" class="emu_card_ifr_swiper" src="jianguan_menuHx.html"> </iframe> </div> 父页面js 片段 var vm = new Vue({ // 这个...
iframe 父窗口和子窗口相互的调用方法集锦
01-19
一、父窗口调用iframe子窗口方法 1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe> 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent....
jquery、js调用iframe父窗口与子窗口元素的方法整理
10-25
以上就是jQuery和JavaScript调用iframe父窗口与子窗口元素的方法。在实际应用中，要注意跨域问题，如果父页面和iframe的源不同，它们之间的交互可能会受到浏览器同源策略的限制。此外，确保正确引用jQuery库，并且在...
js中iframe调用父页面的方法
01-19
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 ...
QTQTQTQTQTQTQTQTQTQTQTQTQTQTQT
08-07
QTQTQTQTQTQTQTQTQTQTQTQTQTQTQT
薪酬设计薪资规划与晋升制度.ppt
08-07
薪酬设计薪资规划与晋升制度.ppt
Exaros（艾克萨罗斯），C 语言开发的基于 RISCV 的操作系统.zip
08-07
优质项目，资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足，有任何使用问题欢迎随时与我联系，我会及时为你解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（若有），项目具体内容可查看下方的资源详情。 【附带帮助】： 若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步。 【本人专注计算机领域】： 有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为你提供帮助，CSDN博客端可私信，为你解惑，欢迎交流。 【适合场景】： 相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
杰出班组长训练营.ppt
08-07
杰出班组长训练营.ppt
基于Java的视频会议系统模块项目（程序+论文）.zip
08-07
JAVA; 毕业设计；MVC模式; JSP; SQL Server 2000 数据库管理系统; J2EE
[毕业设计]VB+Access企业库存管理系统(源代码+论文+开题报告+目录).zip
08-07
[毕业设计]VB+Access企业库存管理系统(源代码+论文+开题报告+目录)
‌霜冰优化算法（RIME）matlab代码
最新发布
08-07
‌霜冰优化算法（RIME）是一种启发式优化算法，其灵感来源于自然界中霜冰的生长机制。这种算法通过模拟霜冰的形成过程，利用软霜的随机性和硬霜的规律性进行搜索，旨在解决优化问题。霜冰优化算法的主要特点包括软霜搜索策略、硬霜穿刺机制以及‌正向贪婪选择机制，这些机制共同作用以提高全局解的质量。
C语言课程设计_BC_公共交通行程管理系统.zip
08-07
优质项目，资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足，有任何使用问题欢迎随时与我联系，我会及时为你解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（若有），项目具体内容可查看下方的资源详情。 【附带帮助】： 若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步。 【本人专注计算机领域】： 有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为你提供帮助，CSDN博客端可私信，为你解惑，欢迎交流。 【适合场景】： 相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
大学生国赛电子设计优秀作品-16.光伏并网发电模拟装置.zip
08-07
大学生国赛电子设计优秀作品-16.光伏并网发电模拟装置.zip
基于C#写的一个疫情核酸检测登记系统.zip
08-07
优质项目，资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足，有任何使用问题欢迎随时与我联系，我会及时为你解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（若有），项目具体内容可查看下方的资源详情。 【附带帮助】： 若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步。 【本人专注计算机领域】： 有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为你提供帮助，CSDN博客端可私信，为你解惑，欢迎交流。 【适合场景】： 相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
C# Socket编程，TCP通讯，包运行 可互相发送消息，文件
08-07
c# Socket编程，TCP通讯，包运行 可互相发送消息，文件 代码包运行，不报错。 适合学习研究
[毕业设计]VB+ACCESS就业信息管理与失业保险申领系统(源代码+论文+答辩幻灯片).zip
08-07
[毕业设计]VB+ACCESS就业信息管理与失业保险申领系统(源代码+论文+答辩幻灯片)
js调用iframe子页面的方法和变量
06-27
要在父页面中调用子页面的方法和变量，可以使用以下几种方式： 1. 使用iframe.contentWindow属性获取子页面的window对象，然后调用该对象的方法或访问该对象的属性。 例如，假设iframe的id为"myFrame"，子页面中有一个名为"myFunction"的方法和一个名为"myVariable"的变量，可以使用以下代码来调用它们： ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.myFunction(); var myValue = childWindow.myVariable; ``` 2. 在子页面中定义一个全局变量或函数，并在父页面中通过iframe对象的contentWindow属性访问它们。 例如，子页面中定义了一个名为"myFunction"的全局函数和一个名为"myVariable"的全局变量，可以使用以下代码在父页面中访问它们： ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.myFunction(); var myValue = childWindow.myVariable; ``` 3. 在父页面中使用postMessage API向子页面发送消息，并在子页面中监听该消息，并根据消息内容执行相应的操作。 例如，在父页面中发送消息： ```javascript var iframe = document.getElementById("myFrame"); var childWindow = iframe.contentWindow; childWindow.postMessage("hello", "http://example.com"); ``` 在子页面中监听消息： ```javascript window.addEventListener("message", function(event) { if (event.origin == "http://example.com" && event.data == "hello") { // 执行相应的操作 } }); ``` 需要注意的是，在使用postMessage API时需要注意安全性，防止被恶意代码利用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值