实现 iframe 子页面调用父页面中的js方法

最新推荐文章于 2019-10-24 19:43:16 发布

转载最新推荐文章于 2019-10-24 19:43:16 发布 · 598 阅读

本文展示了如何在HTML页面中通过iframe元素实现父页面与子页面间的通信，具体包括父页面向子页面传递消息及子页面响应父页面请求的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父页面：index.html(使用iframe包含子页面child.html)

[xhtml] view plain copy print ?

<html>
<head>
<script type="text/javascript">
<!--
function toshow(msg){
alert("这里是父页面:"+msg);
}
// -->
</script>
</head>
<body>
<iframe background="blue" src="child.html" mce_src="child.html"></iframe>
</body>
</html>

子页面child.html(调用父页面toshow方法)

[xhtml] view plain copy print ?

<html>
<head>
<script type="text/javascript">
<!--
function doparent(){
window.parent.toshow('ccccchild');
}
// -->
</script>
</head>
<body>
This is child frame!!
<input type="button" value="请点击" onclick='doparent()'></input>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jw903

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

在父页面调用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对象 */ }

html子页面调用父页面的方法

zww学习笔记

09-26

2万+

不做过多的介绍了，直接看代码吧。 父页面：<!DOCTYPE html> <html> <head> <title>parents</title> <meta charset="UTF-8"> </head> <body> <script language="javascript" type="text/javascript"> function sayhello() {

参与评论您还未登录，请先登录后发表或查看评论

js父页面调用子页面的方法以及子页面调用父页面的方法

xuanlv_haoshao的博客

05-04

7837

父页面代码：子页面代码：效果如下：测试按钮有效的触发对应页面的方法子页面调用父页面的方法：parent.parentFun();父页面调用子页面的方法：var childWin=$("#testIframe")[0].contentWindow; childWin.IframeFun();注：testIframe为iframe的id...

iframe调用父页面的方法

温故知新

03-29

1638

方法：window.parent.test()，test()方法是需要调用父页面的方法。示例： 1.创建一个父页面 function test(){ alert("test"); } 2.创建一个子页面

html页面中iframe嵌套页面的父页面和子页面js方法互相调用

热门推荐

红桃峰峰的博客

08-25

3万+

我们在写html页面或者说是jsp页面是，有时候需要在一个页面中使用iframe标签嵌套另一个页面，而两个页面有些数据需要交互，这个时候就会用到js技术，互相调用方法，当我们在父页面中需要调用iframe标签中嵌入的子页面中的js方法时，可以使用： document.getElementById(iframe的id).contentWindow.childtest();

JQuery 主页面调用子页面(<iframe>)中的JS方法，子页面调用主页面的JS方法

houyanhua1的专栏

01-15

2万+

//调用子页面的方法. var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。 childWindow.subFunction(); //调用子页面中的subFunction方法

js中iframe调用父页面的方法

01-19

子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了比如调用a()函数，就写成：代码如下:window.parent.a(); 但是我在chrome浏览器下却发现此...

iframe子父页面调用js函数示例

12-12

本篇文章将详细讲解如何在`iframe`子页面调用父页面的JS函数以及反之的操作。 ### 1. 子页面调用父页面的JS函数在`iframe`子页面中，要调用父页面的JavaScript函数，可以使用`window.parent`对象来引用父窗口。...

在iframe中调用js父页面和子页面方法

08-08

总结，`iframe`中的JavaScript交互涉及到页面间的通信，无论是父页面调用子页面还是子页面调用父页面，都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术，可以在多页面应用中实现更复杂的功能...

Jquery调用iframe父页面中的元素及方法

11-24

在网页开发中，有时我们需要在`iframe`中与父页面进行交互，比如调用父页面中的元素或执行父页面的方法。本文将详细讲解如何使用jQuery实现这一功能。首先，我们来了解一下`iframe`的基本概念。`iframe`（Inline ...

IFrame下子页面调用父框架的JS方法

hsicool的专栏

05-03

4460

转载parent.frames["frameName"].window.functionName();frameName:IFrame的ID; funtionName:子页面中JS方法名; var obj = parent.frames["frameName"].window; 在父页面访问子页面中某个控件如:obj.document.getElementById('clientID'

angular从iframe里面调用父页面的controller的方法

专注于大数据方向，区块链，前后端，数据可视化，人工智能等领域

10-24

1924

从iframe中调用父页面的controller中方法 1、从当前页面中获取对应的controller，可以通过一下方法去获取。 angular.element(xxx).scope() 2、获取父页面的controller window.parent.angular.element(xxx).scope(); // 未能获取 window.parent.$(‘div[ng-controller...

iframe页面中父页面跟子页面方法的相互调用

每天多一点干货

06-09

3996

不废话，直接上代码 父页面代码： Parent Page function parenttest() { alert("这是父页面的方法！"); } function btnClick() { document.g

iframe 父页面与子页面互相调用方法

云上人间钦自赏

06-08

1万+

HTML：主要是name属性 1、父页面调用子页面函数： 父页面的代码 childframe.window.getpara('' + userid + ''); 子页面代码 function getpara(uid) { $("#hduid").val(uid); } 2、子页面调用父页面函数： parent.functionName(); 3、LHG弹窗 A

iframe中子页面调用父页面的js方法

qq_15884363的博客

01-18

7841

app.html http://www.w3.org/1999/xhtml">无标题文档 function val(){ alert('frame子窗体调用父窗体方法'); } js remote index.htmlhttp://www.w3.org/1999/xhtml">无标题文档服务器分部积分附件包括发酵白金卡哇

iframe父级页面与子级页面互相调用js的方法

不明所以

08-17

5935

iframe子级页面调用父级页面： window.parent.父级页面方法(); iframe父级页面调用子级页面： document.getElementById("iframeID").contentWindow.子级页面方法();