html嵌套父js的数据,javascript控制html父子框架iframe的值传递及方法引用问题

这里要讨论的问题涉及到这几个方面：

1. 父框架获取子框架的元素值

2. 子框架获取父框架的元素值

3. 子框架之间的元素值获取

4. 父框架调用子框架的方法

5. 子框架调用父框架的方法

6. 子框架之间的方法调用

以下是根据收集与查阅整理的一些资料，仅作参考，不足之处敬请指正。

首先以三个简单的页面作为例子进行说明

主页面代码：

主页面

function showSubValue(){

//var v = window.frames[0].document.getElementById("subdiv1").innerHTML;

//alert(v);

//var url="http://lzw.me"

var o = $(window.frames[0].document).find(":div#subdiv1");

alert(o.html());

}

for(var i=0;i

window.frames.showSubValue();

}

主页面测试数据

iframeA页面及代码：

子页面A

function showMainValue(){

//dom方式

//var v = window.parent.document.getElementById("mainDiv").innerHTML;

//alert(v);

//window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";

//jquery方式

var o = $(window.parent.document).find(":div#mainDiv");

alert(o.html());

}

子页面测试数据

iframeB页面及代码：

与iframeA雷同，略

1. 父框架操作子框架的元素值

DOM方法window.frames["iframeSon"].document

举例：

var v = window.frames[0].document.getElementById("subdiv1").innerHTML;

alert(v);

jquery方法

在父窗口中操作 选中IFRAME中的所有输入框：

$(window.frames["iframeSon"].document).find(":text");

举例：

var o = $(window.frames[0].document).find(":div#subdiv1");

alert(o.html());

举例二：在父窗口中操作 选中IFRAME中的所有单选钮：

$(window.frames["iframeA"].document).find("input[@type='radio']").attr("checked","true");

2. 子框架操作父框架的元素值

DOM方法：

window.parent.document

举例：

var v = window.parent.document.getElementById("mainDiv").innerHTML;

alert(v);

window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";

jquery方法

在IFRAME中操作 选中父窗口中的所有输入框：

$(window.parent.document).find(":text");

举例：

var o = $(window.parent.document).find(":div#mainDiv");

alert(o.html());

3. 子框架之间的元素值操作

这个需要借助主页面间接获取另一个子页面。子页面A通过主页面间接获取子页面B，然后即与正常操作dom相同

DOM方式举例

//通过父页面，间接获取另外一个子页面

if (self != top) {

var oDoc = top.parent.document;

var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一个iframe

alert(oAnotherFrame.location);

alert(oAnotherFrame.document.body.innerHTML);

alert(oAnotherFrame.document.documentElement.innerHTML);

var oTxt = oAnotherFrame.document.getElementById("txtUserName");

alert(oTxt.value);

}

jqery方式举例iframeB中jQuery改变iframeA的src代码：

$("#iframeA",parent.document.body).attr("src",http://lzw.me);

4. 父框架调用子框架的方法

基本格式为：window.frames[sonframe].子框架函数方法

例如一个页面里有多个iframe，每个iframe里都有一个doQuery方法。

主页面调用每个iframe的showSubValue方法举例：

for(var i=0;i

window.frames.showSubValue();

}

5. 子框架调用父框架的方法

子页面触发主页面的函数方法，只需要如下操作即可

parent.window.函数方法

举例参考：

if(getcookie("lzw.me.user")=="") parent.window.login_form();

6. 子框架之间的方法调用

参考3和4，举例如下：

var oDoc = top.parent.document; //获取父窗体DOM对象

var oAnotherFrame = oDoc.frames["iframeB"]; //返回另外一个iframe

oAnotherFrame.showSubValue(); //执行子窗体iframeB的方法