js实现iframe跨页面调用函数的方法
本文实例讲述了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程序设计有所帮助。
-
本文向大家介绍js中iframe调用父页面的方法，包括了js中iframe调用父页面的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数，就写成： 但是我在ch
-
本文向大家介绍js防止页面被iframe调用的方法，包括了js防止页面被iframe调用的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js防止页面被iframe调用的方法。分享给大家供大家参考。具体实现方法如下： 一、问题描述： 有时候我们发会现自己的网站页面被别人调用并且一模一样，这个其实就是简单的iframe调用了，下面我来给大家介绍js防止页面iframe调用的方法总结吧，有
-
本文向大家介绍Vue 使用iframe引用html页面实现vue和html页面方法的调用操作，包括了Vue 使用iframe引用html页面实现vue和html页面方法的调用操作的使用技巧和注意事项，需要的朋友参考一下 当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现他们的交互 首先我们可以再vue页面中使用标签引用html页面
-
本文向大家介绍使用postMesssage()实现iframe跨域页面间的信息传递，包括了使用postMesssage()实现iframe跨域页面间的信息传递的使用技巧和注意事项，需要的朋友参考一下 由于web同源策略的限制，当页面使用跨域iframe链接时，主页面与子页面是无法交互的，这对页面间的信息传递造成了不小的麻烦，经过一系列的尝试，最后我发现有以下方法可以实现： 1. 子页面url传参
-
本文向大家介绍js实现跨域的多种方法，包括了js实现跨域的多种方法的使用技巧和注意事项，需要的朋友参考一下 从域说起 域： 域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”，这一点不是WIN2K所独有的，但活动目录可以贯穿一个或多个域。在独立的计算机上，域即指计算机本身，一个域可以分布在多个物理位置上，同时一个物理位置又可以划分不同网段为不同的域，每个域都有自己的安全
-
本文向大家介绍js实现页面a向页面b传参的方法，包括了js实现页面a向页面b传参的方法的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了js实现页面a向页面b传参的具体方法，供大家参考，具体内容如下 方法一：使用HTML5本地化存储(localStorage) 组件（本地最大能存储5M数据）localStorage是本地永久存储数据，是cookie的优化 方法二：使用cookie将数据存放