这篇文章主要介绍了 js 实现 iframe 跨页面调用函数的方法, 实例展示了 iframe 中父页面调用子页面和子页面调用父页面的实现技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现 iframe 跨页面调用函数的方法。分享给大家供大家参考。具体实现方法如下:
在项目中难免会遇到这样一个问题就是页面引入了 IFrame 并且需要父页面调用子页面函数或者子页面需要调用父页面函数。比如说:现在有两个页面 parent.html 和 child.html。其中 parent.html 中含有 IFrame 并且 IFrame 指向 child.html。现在需要在 parent.html/child.html 中调用 child.html/parent.html 的一个 js 方法。
具体的代码实现如下:
parent.html 父页面:
- <html>
- <head>
- <script type="text/javascript">
- function parent_click() {alert("来自父页面");
- }
- </script>
- </head>
- <body>
- <input type="button" value="调用本页面函数" onclick="parent_click();" />
- <input type="button" value="调用子页面函数" onclick='window.frames["childPage"].child_click();'
- />
- <iframe id="childPage" name="childPage" src="inner.html" width="100%"
- frameborder="0">
- </iframe>
- </body>
- </html>
child.html 子页面:
- <html>
- <head>
- <script type="text/javascript">
- function child_click() {alert("调用的子页面函数");
- }
- </script>
- </head>
- <body>
- <input type="button" value="调用父页面函数" onclick='parent.window.parent_click();'
- />
- <input type="button" value="调用本页面函数" onclick="child_click();" />
- </body>
- </html>
希望本文所述对大家基于 javascript 的 web 程序设计有所帮助。
来源: