在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. hdu1083二分图匹配模板题

    onsider a group of N students and P courses. Each student visits zero, one or more than one courses. ...

  2. Hbase的架构原理、核心概念

    Hbase的架构原理.核心概念 1.Hbase的表.行.列.列族 2.核心组件: Table和region Table在行的方向上分割为多个HRegion, 一个region由[startkey,en ...

  3. 如何让CSS区别IE版本

    关于IE浏览器实在太坑爹了,但你又不得不去解决它,不过就本人所知,IE8—IE10差别不大,至少本人还没有遇到过在IE8环境下到了IE9及以上版本就出现坑爹的问题,但我们又不得不面对IE8以下的版本, ...

  4. 【原创】JQWidgets-TreeGrid 1、快速入门

    首先附上官方TreeGrid的传送门: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/ ...

  5. Json及Json字符串

    JSON(JavaScript Object Notation)是一种独立于开发语言的用于存储和交换文本数据的格式,JSON 语法是JavaScript 语法的子集. Json 可以保存数组格式和对象 ...

  6. SVN分支/合并原理及最佳实践

    转自:http://blog.csdn.net/e3002/article/details/21469437 使用svn几年了,一直对分支和合并敬而远之,一来是因为分支的管理不该我操心,二来即使涉及到 ...

  7. Hibernate SQLQuery 原生SQL 查询及返回结果集处理-2

    1. 返回List, .setResultTransformer(      Transformers.ALIAS_TO_ENTITY_MAP);将结果转为Map,存放到list中,即list中为若干 ...

  8. 029 hibernate抓取策略

    实例A引用实例B,B如果是代理的话(比如多对一关联中):如果遍历A的查询结果集(假设有10条记录),在遍历A的时候,访问B变量,将会导致n次查询语句的发出!这个时候,如果在B一端的class上配置ba ...

  9. Python之日志处理（logging模块）

    本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging四大组件记录日志 配置logging的几种方式 向日 ...

  10. 开关调色新世界BP2888电源解决方案

    LED智能方案经过几年的拼杀,已经风靡照明界.但人们渐渐发现,对照明来说,一味追求花哨的功能并不被市场所认同,而其中开关调色,以其简单易操作的特点,已逐步融入广大消费者的生活习惯中.对吸顶灯,面板灯等 ...