js实现iframe跨页面调用函数的方法

前端技术 2023/09/03 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/7176

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案