在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. shell中的Mysql查询

    1 #!/bin/bash 2 #查询 3 echo -e  4 for i in `cat id.txt` 5 do 6 A=`mysql -h10 -uw -p2012 -Ne "sel ...

  2. 在Angular项目下使用Umeditor

    Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本. 公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合.但是目前官方只提供Jsp ...

  3. java中难度大一点的面试题

    1.请大概描述一下Vector和ArrayList的区别,Hashtable和HashMap的区别.(5) (1)Vector和ArrayList的异同 实现原理,功能相同,可以互用 主要区别: Ve ...

  4. 关于jstl.jar引用问题及解决方法

    在前文SSM说到因为从MyEclipse换成了Eclipse.有些架包自动缺失. 造成:"org.apache.jasper.JasperException: This absolute u ...

  5. 针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

    最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr,ppi,dp,pt等,然而想了一阵,浆糊了 ...

  6. c#无限循环线程如何正确退出

    c#无限循环线程如何正确退出 在主程序将要结束时,迅速正确退出无限循环执行的子线程.一般子线程循环执行会有一个指定的周期, 在子线程等待(或者睡眠)时,无法唤醒退出,尤其在执行周期较长时,子线程无法即 ...

  7. Oracle正则表达式之匹配邮箱

    利于正则表达式匹配出符合电子邮箱的数据 --1 表准备create table test_regexp( object varchar2(50)); --2 数据准备 insert into test ...

  8. mysql source 报错 Unknown command '\'' 解决办法

    系统:Windows2008 R2 source 导入数据总是报错. ERROR:Unknown command '\''.ERROR:Unknown command '\"'.ERROR ...

  9. Java (PO,VO,DAO,BO,POJO,DTO) 几种对象解释

    1. PO:persistant object 持久对象 可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对 ...

  10. 读《Java并发编程的艺术》（二）

    上篇博客开始,我们接触了一些有关Java多线程的基本概念.这篇博客开始,我们就正式的进入了Java多线程的实战演练了.实战演练不仅仅是贴代码,也会涉及到相关概念和术语的讲解. 线程的状态 程的状态分为 ...