在Iframe中调用子页面的Js函数

调用IFRAME子页面的JS函数

说明：假设有2个页面，index.html和inner.html。其中index.html中有一个iframe，这个iframe的src指向inner.html。 
我们现在要做的就是： 
1.在index.html中调用inner.html上的一个js方法 
2.在inner.html中调用index.html上的一个js方法

实现代码如下：

index.html 

<html> 
<head> 
<script type="text/javascript"> 
function ff(){ 
alert(">>this is index's js function  index.html"); 
} 
</script> 
</head> 
<body> 
<div style="background: lightblue;"> 
This is index page. 
<input type="button" value="run index's function" onclick="ff();" /> 
<input type="button" value="run inner page's function" onclick='window.frames["childPage"].sonff();' /> 
</div> 
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 
</body> 
</html>

inner.html 

<html> 
<head> 
<script type="text/javascript"> 
function sonff(){ 
alert(">>this is inner page's js function"); 
} 
</script> 
</head> 
<body> 
<div style="background: lightgreen;"> 
This is inner page. 
<input type="button" value="run index's function" onclick='parent.window.ff();' /> 
<input type="button" value="run inner page's function" onclick="sonff();" /> 
</div> 
</body> 
</html>

iframe访问子页面方法的更多相关文章

  1. 主页面获取iframe 的子页面方法。

    父页面parent.html <html> <head> <script type="text/javascript"> function sa ...

  2. layui父页面执行子页面方法

    parent.window[layero.find('iframe')[0]['name']].子页面方法(); layero.find('iframe')[0].contentWindow.子页面方 ...

  3. js-关于iframe:从子页面给父页面的控件赋值方法

    项目中我们经会用到iframe,可能还会把iframe里的数值赋值给父页面空间. 接下来我们来说说有关于iframe赋值给父页面的方法. 1.子页面iframe给父页面的控件赋值方法. parent. ...

  4. layui 如果调用 from 内嵌入的 iframe子页面方法

    (人笨,占时想法的办法,不要骂,不要骂,怕了怕了,想到别的会来改的) 父页面; <%@ page language="java" contentType="text ...

  5. 使用iframe框架后的页面跳转时目标页面变为iframe的子页面的问题

    <frameset rows="4,200,10,*,120" cols="*" framespacing="0" framebord ...

  6. Bootstrap 模态框 + iframe > 打开子页面 > 数据传输/关闭模态框

    父页面bootstrap模态框: <div class="modal fade" id="myModal" tabindex="-1" ...

  7. iview2.0 父组件访问子组件 方法

    //从父组件中访问子组件 可以给子组件定义标识 通过ref="chead" 定义  通过父组件就可以访问了

  8. 使用JavaScript访问子节点方法elementNode.childNodes时，需要注意的地方

    有这样一个HTML结构 <div> javascript <p>javascript</p> <div>jQuery</div> <h ...

  9. iframe根据子页面自动调整大小

    //iframe高度自适应 function IFrameReSize(iframename) { var pTar = document.getElementById(iframename); if ...

随机推荐

  1. linux 安装memcached C/C++使用libmemcached库（续）

    #include <iostream> #include <string> #include <libmemcached/memcached.h> using na ...

  2. 多个php版本的composer使用

    由于系统环境变量之前同事安装的laravel是5.1...php默认的环境变量是: 不想破话原有环境变量,因为现在新的项目是laravel5.4...所以在用默认composer require安装时 ...

  3. 关于BSTR和SysStringLen方法的简单研究

    英文的我编不下去了,所以还是先写个中文的吧, 之前遇到了SysStringLen求Bstr长度不正确的问题,试验了几次都不行的情况下我觉得可能是这个方法的bug,所以就没管. 大概的情况是这样: in ...

  4. 百度地图API，定位您的当前位置

    1.介绍 利用百度地图的API来定位您的所属位置,这个位置返回的是经纬度,而不是具体的汉字位置.利用经纬度,再显示在百度地图上的位置. 2.代码 <html> <head> & ...

  5. PS不能存储，因为程序错误

    当PS中遇到不能存储文件,因为程序错误时,可以这样: http://www.zcool.com.cn/article/ZMTgwOTQw.html

  6. iOS之copy、strong使用，block特性

    身边一同事,我印象在过去三个月,有两次因为使用“copy”修饰UIKit控件的属性,导致程序崩溃.他还一本正经的说我以前一直使用copy. 好了,到这里我们就不得不说说什么时候使用copy.我的印象中 ...

  7. Redis学习-发布/订阅

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.Redis 客户端可以订阅任意数量的频道. 常用命令 命令 描述 复杂度 返回 PSUBS ...

  8. CachedRowSet使用

    public interface CachedRowSet extends RowSet,Joinable 所有标准 CachedRowSet 实现都必须实现的接口.Sun Microsystems ...

  9. JAVA CyclicBarrier类详解

    一个同步辅助类,它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时CyclicBarrie ...

  10. JVM调优总结：分代垃圾回收详述

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...