在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. ajax获取数据后怎么去渲染到页面？

    $.ajax({ url:"apiAttachmentAction_uploadAttachment.action", type:"post", data:fo ...

  2. angularjs jsonp跨域

    <script> (function(angular){ "use strict" var app= angular.module('appController',[] ...

  3. java之对数组排序

    一.在运行时输入数组 import java.util.*; //也可以写成  import java.util.Scanner; public class px { public static vo ...

  4. git笔记--git@OSC

    之前安装了git,用了不久就升级系统了,发现又忘记了步骤,虽然网上有很多教程,但寻找需要浪费太多的时间,由于github连接比较慢,所以使用了开源中国的托管http://git.oschina.net ...

  5. C返回函数指针的函数

    如下函数 char (*retCharWithInt(char, char))(int); 申明了函数指针retCharWithInt,该指针指向一个形参是(char,char),返回值是char(* ...

  6. Jdk1.6 JUC源码解析(13)-LinkedBlockingQueue

    功能简介: LinkedBlockingQueue是一种基于单向链表实现的有界的(可选的,不指定默认int最大值)阻塞队列.队列中的元素遵循先入先出 (FIFO)的规则.新元素插入到队列的尾部,从队列 ...

  7. 云计算之路-阿里云上：攻击又来了，4个IP分别遭遇超过30G的流量攻击

    继5月13日下午被攻击之后,今天下午,攻击又肆无忌惮地来了,14:35.14:39.14:40.14:41 ,依次有4个IP遭遇超过30G的流量攻击,被阿里云“云盾”关进“黑洞”,造成被攻击IP上的站 ...

  8. 1-LPC1778建立工程

    先来建立一个工程模板,,,要比32简单的多,假设32是用库开发的话,,,,因为还要把那些和库相关的文件加到工程里.... LPC呢就只需要把设置系统和总线的时钟文件(system_LPC177x_8x ...

  9. 关于关系型数据库（MySQL）的一些概念

    主键:关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录, 该属性组就可以成为一个主键,主键不允许为空,主键只能有同一个 外键:如果一个表的某个属性是另一个表的主 ...

  10. 作为.net程序员学jsp，伤不起

    <%@page import="java.sql.*"%> <%@ page language="java" import="jav ...