当前位置: 首页 > 编程笔记 >

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

孔俊友
2023-03-14
本文向大家介绍js实现iframe跨页面调用函数的方法,包括了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实现页面a向页面b传参的方法,包括了js实现页面a向页面b传参的方法的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了js实现页面a向页面b传参的具体方法,供大家参考,具体内容如下 方法一:使用HTML5本地化存储(localStorage) 组件(本地最大能存储5M数据)localStorage是本地永久存储数据,是cookie的优化 方法二:使用cookie将数据存放

  • 本文向大家介绍js实现跨域的多种方法,包括了js实现跨域的多种方法的使用技巧和注意事项,需要的朋友参考一下 从域说起 域: 域是WIN2K网络系统的安全性边界。我们知道一个计算机网最基本的单元就是“域”,这一点不是WIN2K所独有的,但活动目录可以贯穿一个或多个域。在独立的计算机上,域即指计算机本身,一个域可以分布在多个物理位置上,同时一个物理位置又可以划分不同网段为不同的域,每个域都有自己的安全