框架父子页面iframe相互调用方法


如果你采用嵌入iframe机制不可避免的要用到各个iframe页面之间方法和属性的相互调用。这里介绍的是兼容各个浏览器的iframe调用方式。

这里设定有3个页面一个父页面main.html它嵌入了两个iframe分别是childPage1.html和childPage2.html

main.html有一个函数叫parentFunc()。main.html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript"

function parentFunc(){

//代码段

}

</script>

<body>

<IFRAME scrolling="no" frameBorder=0 id=frmchild1 name=frmchild1 height="400"

src="childPage1.html" width="100%" allowTransparency="true"></IFRAME>

<IFRAME scrolling="no" frameBorder=0 id=frmchild2 name=frmchild2 height="400"

src="childPage2.html" width="100%" allowTransparency="true"></IFRAME>

</body>

</html>

子页childPage1.html中有函数childFunc1()。代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript"

function childFunc1(){

//代码段

}

</script>

<body>

</body>

</html>

子页childPage2.html中有函数childFunc2()。代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<script type="text/javascript"

function childFunc2(){

//代码段

}

</script>

<body>

</body>

</html>

子页调父页方法

如果子页childPage1.html要调用父页main.html中的parentFunc()方法那么应该在childPage1.html中写如下代码

parent.parentFunc()

或者用

top.parentFunc()

parent找上一级top找最上一级。因为childPage1.html属于二级所以parent和top作用一样。 如果 childPage1.html又嵌了一个 grandchildrenPage.html的iframe想要调用main.html中的parentFunc()方法 则应该

parent.parent.parentFunc()

或者用

top.parentFunc()

两个子页方法互调

如果childPage1.html要调用childPage2.html中的方法childFunc2()则应该在childPage1.html中写如下代码

parent.frmchild2.parentFunc()

或者用

top.frmchild2.parentFunc()

frmchild2是main.html中引入第二个iframe时的id。同理childPage2.html要调用childPage1.html中的方法childFunc1()则应该在childPage2.html中写如下代码

parent.frmchild1.parentFunc()

或者用

top.frmchild1.parentFunc()

子页取得父页的节点对象及属性

在main.html中有一个按钮

<input type="button" value="aaa" id="parentBtn"/>

子页childPage1.html要取得该按钮的value则应在childPage1.html中写如下代码

parent.document.getElementById("parentBtn").value;

或者用

top.document.getElementById("parentBtn").value;

两个子页互取节点

例如子页childPage1.html中有一个按钮如下

<input type="button" value="11" id="btn"/>

如果childPage2.html要调用childPage1.html中按钮的value则应该在childPage2.html中写如下代码

parent.frmchild1.document.getElementById("btn").value;

或者用

top.frmchild1.document.getElementById("btn").value;

父页调用子页方法

如果main.html要调用子页childPage1.html中的方法childFunc1()应在main.html中写如下代码

document.getElementById("frmchild1").contentWindow.childFunc1()

frmchild1是main.html中引入第一个iframe时的id。 注意可能网上流传着其他的做法但大多不兼容。有的只能在IE生效有的只能在FireFox下生效。所以要以此为准。

父页取得子页节点对象及其属性

例如子页childPage1.html中有一个按钮如下

<input type="button" value="11" id="btn"/>

main.html要取得或更改子页childPage1.html的按钮的value值那么应该用如下代码

document.getElementById("frmrightChild").contentWindow.document.getElementById(‘btn‘).value;

再例如要取得子页childPage1.html的内容高度可以从body节点的scrollHeight获得。

document.getElementById("frmrightChild").contentWindow.document.body.scrollHeight;

但要注意需要在iframe页面onload后才能取到其节点。所以完整的做法是main.html在引入childPage1.html加上onload函数如下

<IFRAME scrolling="no" frameBorder=0 id=frmchild1 name=frmchild1 height="400"

src="childPage1.html" width="100%" allowTransparency="true"></IFRAME>

getChildHeight()函数如下

function getChildHeight(){

var frm=document.getElementById("frmchild1");

var childHeight;

childHeight=frm.contentWindow.document.body.scrollHeight+"px";

}

文章来源http://www.uileader.com/doc/quickui/main.html

时间： 2024-10-06 10:38:34

框架父子页面iframe相互调用方法的相关文章

iframe父子页面之间相互调用元素和函数

1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="Keywords" content=""> 6 <meta name="Description" con

父窗口与iFrame之间调用方法和元素

父窗口与iFrame之间调用方法和元素 父窗口调用子窗口: 调用元素 js格式: var obj=document.getElementById("iframe的name").contentWindow; var ifmObj=obj.document.getElementById("iframe中控件的ID"); ifmObj.click(); 实例: var obj=document.getElementById("ifm").content

用JavaScript刷新框架子页面的七种方法

下面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做. 其中framedemo.html由上下两个页面组成,代码如下: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < HTML> < HEAD> < TITLE> frameDemo < /TITLE> < /HEAD> 

关于页面刷新或者调用方法事获取不到元素信息或者出现缺少对象错误的换位思考setTimeout的使用

这两天客户的需求不能定下来,做闲人好长时间了,不如来整理下最近碰到的一些个小麻烦. 正题: 场景一. 最近在开发的过程中使用到了百度的富客户端文本编辑器(ueditor)---这是一款功能很强大的文本编辑器, 现在需求:当在这个页面打开以后需要把用户上次编辑的信息写回到此文本编辑器中去,这里使用的方法是ueditor给定的方法.同时使用iframe对此编辑器进行了页面嵌套的显示. 1 //将html代码展示到编辑器中. 2 function insertHtml(value) { 3 setCo

子页面iframe如何调用 父页面的方法 或者对象（基于layui框架）

layui.use(... function(){var _tools = {func1: function(){console.log('func1');}}window.tools = _tools;}) // 外部调用,如子页面parent.tools.func1(); 原文地址:https://www.cnblogs.com/Angel-szl/p/11232485.html

js里父页面与子页面的相互调用

(原文地址:http://blog.sina.com.cn/s/blog_8089e3810101464f.html) 一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName(param1,param2); 2.父页面关闭子页面:在父页面 openWin=window.open(""); function bClick(){ openWin.

两个java工程之间的相互调用方法

如果你有两个java项目的话,如何向他们之间进行信息的通信前提:必须知道要通信的java项目(接收请求方)的服务器的IP地址和访问路径.其实两个java项目之间的通信还是使用HTTP的请求.主要有两种方式:①使用apache的HttpClient方式.②使用JDK自带的java.net包下的HttpURLConnection方式. 这次主要讲解HttpURLConnection方式:HttpURLConnection传递请求常用的有两种方式:POST和GET方式.使用setRequestMeth

Iframe父页面与子页面之间的相互调用

iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

iframe 父子页面方法调用

在写代码的时候经常会用到将一个网页嵌入到另一个网页中,w3c也规定了一个标签<iframe>,这个标签本身就支持跨域,而且所有的浏览器都支持 iframe具有以下属性: 1.frameborder 设为1代表显示周围边框,设置为0不显示周围边框 2.height 设置iframe的高度 3.width 设置iframe的宽度 4.longdesc 属性值为URL 规定一个页面,该页面包含了有关 iframe 的较长描述 5.marginheight 定义 iframe 的顶部和底部的边距 6.