调用iframe中父页面/子页面中的JavaScript方法

程序员文章站 2022-03-04 15:23:16

...

明：假设有2个页面，index.html和inner.html。其中index.html中有一个iframe，这个iframe的src指向inner.html。
我们现在要做的就是：
1.在index.html中调用inner.html上的一个js方法
2.在inner.html中调用index.html上的一个js方法

实现代码如下：

index.html

1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is index's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightblue;">
11.This is index page.
12.<input type="button" value="run index's function" onclick="ff();" />
13.<input type="button" value="run inner page's function" onclick='window.frames["childPage"].ff();' />
14.</div>
15.<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe>
16.</body>
17.</html>

inner.html

1.<html>
2.<head>
3.<script type="text/javascript">
4.function ff(){
5.alert(">>this is inner page's js function");
6.}
7.</script>
8.</head>
9.<body>
10.<div style="background: lightgreen;">
11.This is inner page.
12.<input type="button" value="run index's function" onclick='parent.window.ff();' />
13.<input type="button" value="run inner page's function" onclick="ff();" />
14.</div>
15.</body>
16.</html>

调用iframe中父页面/子页面中的JavaScript方法

iframe子页面与父页面在同域或不同域下的js通信_javascript技巧

JavaScript实现页面中录音功能的方法

Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

JavaScript开发中父页面显示遮罩层弹出半透明状态的dialog

JavaScript中的子窗口与父窗口的互相调用问题

php在页面中调用fckeditor编辑器的方法

Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法

在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

iframe子页面获取父页面元素的方法

html iframe的子页面调用父页面方法（代码教程）