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

最新推荐文章于 2020-07-17 17:26:25 发布
最新推荐文章于 2020-07-17 17:26:25 发布
阅读量882 收藏
点赞数
分类专栏： iframe 交互 文章标签： iframe 交互

child1.html和child2.html都是父页面parent.html中的一个子iframe，请看child1.html如何调用child2.html中的方法。

parent.html

[xhtml]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.         <meta http-equiv="Content-Style-Type" content="text/css">  
  6.         <meta http-equiv="Content-Script-Type" content="text/javascript">  
  7.         <title>jQuery Cookie Plugin</title>  
  8.     </head>  
  9.     <body>  
  10.         <iframe id="myFrame1" src="child1.html" mce_src="child1.html"></iframe>   
  11.     <iframe id="myFrame2" src="child2.html" mce_src="child2.html"></iframe>  
  12.     </body>  
  13. </html>  

child1.html

[xhtml]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4.         <meta http-equiv="Content-Style-Type" content="text/css">  
  5.         <meta http-equiv="Content-Script-Type" content="text/javascript">  
  6.         <title>jQuery Cookie Plugin</title>  
  7.     <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
  8.     <mce:script type="text/javascript"><!--  
  9.     function test1() {  
  10.         window.parent.document.getElementById("myFrame2").contentWindow.test2();  
  11.     }  
  12.       
  13. // --></mce:script>  
  14.     </head>  
  15.     <body>  
  16.         <input type="button" onclick="test1();" value="test" />  
  17.     </body>  
  18. </html>  

child2.html

[xhtml]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4.         <meta http-equiv="Content-Style-Type" content="text/css">  
  5.         <meta http-equiv="Content-Script-Type" content="text/javascript">  
  6.         <title>jQuery Cookie Plugin</title>  
  7.     <mce:script type="text/javascript" src="jquery-1.4.2.js" mce_src="jquery-1.4.2.js"></mce:script>  
  8.     <mce:script type="text/javascript"><!--  
  9.     function test2() {  
  10.         alert("I am your brother");  
  11.     }  
  12.       
  13. // --></mce:script>  
  14.     </head>  
  15.     <body>  
  16.         2  
  17.     </body>  
  18. </html>  

秋枫_fly
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe 父窗口和子窗口相互的调用方法集锦
01-19
一、父窗口调用iframe子窗口方法 1、HTML语法：<iframe name=”myFrame” src=”child.html”></iframe> 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent....
iframe嵌套页面传值
一只想躺平却不敢躺平的小菜鸟
01-03 1万+
iframe页面嵌套传值
iframe通过js两个页面传参
心如止水,万事皆成。心态决定我的成功。2013-05-01下定决心。2014-05-11人生的转折点
09-19 9514
最近碰到个问题, 要在Iframe之间传值和数据, 因为页面对像的不同, 一个ifram页面中的form值和数据直接get或Post都是传不到另一个iframe页面的, 设置taget也没有用, 在网上找了很久 没有很好的方法. 只有通过js来实现. 两个重要的javascript语句: top.result.document.location='result.html?da
JS中Iframe之间传值的方法
多一点点的专栏
09-27 2331
1.在iframe子页面中获取父页面的元素： a>window.parent.document这个是获取父页面document中的对象； b>如果要获取父页面js中的方法：window.parent.xxxx（）；xxxx()为方法； 2.在父页面中获取iframe子页面中的元素： a> var child = document.getElementByI
js 实现 iframe 传参
weixin_34321753的博客
11-12 859
案例： <iframe height="430" width="480" id="orderfm" scrolling="No" frameborder="0"></iframe> <script type="text/javascript"> this this.location.href;< /p> a...
jquery、js调用iframe父窗口与子窗口元素的方法整理
10-25
本节主要介绍了jquery、js调用iframe父窗口与子窗口元素的方法,需要的朋友可以参考下
iframe中子父类窗口调用JS的方法及注意事项
10-23
本文给大家介绍iframe中子父类窗口调用JS的方法及注意事项，介绍的超详细，需要的朋友快来学习下
iframe框架之间js方法相互调用及数据传递
weixin_33841503的博客
11-03 219
在一个叫top.html的页面定义两个iframe和两个方法 &lt;iframe id="gg" name="gg" src="gg.html" width="500" height="200"&gt;&lt;/iframe&gt; &lt;iframe id="dd" name="dd" src="dd.
iframe-父子-兄弟页面相互传值(jq和js两种方法)
态度决定一切
12-11 1万+
源码需要复制到相应的文件目录 文件目录： 效果图：（注意url协议不能以 filter:/ 开头） git地址：https://gitee.com/kaiking_g/iframe.git 项目结构： 1.父级html源码： main.html <!doctype html> <html> <h...
js中 frame的主窗口和子窗口之间的传值和方法调用
Jingqingmo的博客
12-23 5176
height="100%" name="high" frameborder="0"> height="100%" name="low" frameborder="0"> 主页面调用iframe中的函数方法：document.getElementById("leftFrame").contentWindow.函数名（）;
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9736
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
使用iframe嵌入子页面中父子级节点元素、JS方法互调总结
weixin_41802726的博客
07-09 1181
1、首先获取到iframe对象①获取当前页面iframe对象：var iframe = document.getElementById("mainContent");//mainContent是iframe的id②获取父页面的iframe对象：var pIframe = parent.document.getElementById("mainContent");2、获取子页面的节点对象var ph...
js表单实现在iframe里post传参
peter_qyq的博客
12-06 2334
html部分 &lt;form id="form1" action="${url}" target="target1" method="post"&gt; &lt;input type="hidden" name="appId" value="${appId}"/&gt; &lt;input type=&quo
关于$.jBox.open从打开的新页面中传值到原来页面
qq_39598940的博客
10-12 2966
先获取弹出窗口对象，再通过对象通过选择器可以获取到弹出页面的数据，下面的实力则是获取弹出页面的一个表单对象
iframe子页面和父页面传值js操作
皮卡丘踢球
07-11 5786
var chooserRegion=$("#chooserRegion",window.parent.document).val();//子页面获取父页面元素取值$("#chooseRegion",window.parent.document).attr("value",region);//子页面给父页面元素赋值存在多级调用window.parent.parent......记好层级关系较重要....
html页面中iframe嵌套页面的父页面和子页面js方法互相调用
热门推荐
红桃峰峰 的博客
08-25 3万+
我们在写html页面或者说是jsp页面是，有时候需要在一个页面中使用iframe标签嵌套另一个页面，而两个页面有些数据需要交互，这个时候就会用到js技术，互相调用方法， 当我们在父页面中需要调用iframe标签中嵌入的子页面中的js方法时，可以使用： document.getElementById(iframe的id).contentWindow.childtest();
iframe标签使用传递参数
sxm666666的博客
06-15 2万+
父级给iframe内部传递参数 方法1：很简单，直接在iframe的src数属性中拼接上参数 // 发送方： <div> <iframe :src="url" id="childFrame" importance="high" name="demo" ></iframe> </div> url = `http://localhost:8080/couponManager?a={a}` // 接收方：直接使用window.location.sea
js调用iframe子页面的方法和变量
最新发布
06-27
例如，假设iframe的id为"myFrame"，子页面中有一个名为"myFunction"的方法和一个名为"myVariable"的变量，可以使用以下代码来调用它们： ```javascript var iframe = document.getElementById("myFrame"); var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值