在项目中难免会遇到这样一个问题就是页面引入了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>

http://blog.csdn.net/qingfeilee/article/details/7280171

 

iframe跨页面调用函数的更多相关文章

  1. iframe子页面调用父页面javascript函数的方法

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...

  2. Javscript调用iframe框架页面中函数的方法

    Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...

  3. iframe标签的子父页面调用函数和属性

    在使用iframe标签时,总想通过子页面调用父页面的一些方法和属性.今天终于发现了. 1在父页面写一个函数 //让子页面来调用此方法,控制导航栏 function childfunc(){ alert ...

  4. JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

    //页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...

  5. window.frames && iframe 跨页面通信

    1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...

  6. [JSP][JSTL]页面调用函数--它${fn：}内置函数、是推断字符串是空的、更换车厢

    页面中调用函数--之${fn:}内置函数 函数描写叙述 fn:contains(string, substring) 假设參数string中包括參数substring,返回true fn:contai ...

  7. iframe 父页面调用子页面的vue方法

                    父页面代码:            html: <div id="app"> //省略业务代码x行..... <iframe sr ...

  8. c语言跨文件调用函数中声明的变量

    转载:weixin_33885253 变量的作用域 变量根据其作用域有全局变量和局部变量之分.全局变量作用域是整个文件,并且可以使用关键字extern达到跨文件调用的目的.但是局部变量值作用于它当前所 ...

  9. iframe父子页面调用小结

     子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法  (子页面同理,需将js方 ...

随机推荐

  1. keepalive和脑裂问题

    keepalive keepalive起初专门为lvs负载均衡软件设计的,用来管理监控lvs集群系统中各个服务节点的状态,后来又加入了可以实现高可用的vrrp功能. keepalive软件通过vrrp ...

  2. java enum(枚举)使用详解 + 总结（转载）

    enum 的全称为 enumeration, 是 JDK 1.5  中引入的新特性,存放在 java.lang 包中. 下面是我在使用 enum 过程中的一些经验和总结,主要包括如下内容: 1. 原始 ...

  3. 妙味，结构化模块化 整站开发my100du

    ********************************************************************* 重要:重新审视的相关知识 /* 妙味官网:www.miaov ...

  4. tcpdump linux抓http请求头

    sudo tcpdump -i eth0 port 80 -s 1024 -l -A

  5. PacificA: Replication in Log-Based Distributed Storage Systems

    PacificA: Replication in Log-Based Distributed Storage Systems - Microsoft Research https://www.micr ...

  6. If the parts of an organization (e.g., teams, departments, or subdivisions) do not closely reflect the essential parts of the product, or if the relationship between organizations do not reflect the r

    https://en.wikipedia.org/wiki/Conway%27s_law

  7. php composer,update-ca-trust

    安装 ComposerComposer 需要 PHP 5.3.2+ 才能运行. $ curl -sS https://getcomposer.org/installer | php这个命令会将 com ...

  8. svn搭建(linux下)

    安装svn: 依赖包: yum install openssl openssl-devel 问题(可以忽略不计):configure: WARNING: we have configured with ...

  9. 转载（web app变革之rem）

    rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我对rem综合评价是用来做web app它绝对是最合适的人选之一. ...

  10. 前端开发 - JQuery - 中

    十四.jquery属性操作 attr prop <!DOCTYPE html> <html lang="en"> <head> <meta ...