html5父子页面代码,关于使用iframe的父子页面进行简单的相互传值

当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？下面根据这种情况作了一个简单的demo案例：

父页面是parentpage.html，子页面是childpage.html。

1、情况一：父页面获取子页面传入的数据(子页面给父页面传值)

父页面：

//获取子页面传入的数据

function getchildvalue(obj){

document.getelementbyid('texts').innertext = obj;

}

子页面：

//给父页面传数据

var txt = '我是子界面主动传值给父界面的数值';

parent.getchildvalue(txt); //getvalue是父界面的js 方法

2、情况二：子页面获取父页面的数据(父页面给子页面传值)

父页面：

//给子页面传入数据

function tochildvalue(){

var txt = '这是父页面给子页面的数据';

return txt;

}

子页面：

//获取父页面传来的数据

var getparentvule = window.parent.tochildvalue();

console.log(getparentvule)

具体传值的数据根据自己的项目要求修改，下面放上两个页面的完整代码：

父页面parentpage.htm

父页面

.box{

width: 600px;

height: 400px;

margin: 10px auto;

}

h3{

font-size: 16px;

}

.cont{

width: 100%;

}

.cont h4{

font-size: 14px;

}

.cont #texts{

width: 100%;

line-height: 22px;

font-size: 13px;

color: #2e2d3c;

}

iframe{

/*只是隐藏，但任然保留dom结构*/

visibility: hidden;

}

这是父页面

这是从子页面传入的数据：

//获取子页面传入的数据

function getchildvalue(obj){

document.getelementbyid('texts').innertext = obj;

}

//给子页面传入数据

function tochildvalue(){

var txt = '这是父页面给子页面的数据';

return txt;

}

子页面childpage.html

子页面

.box{

width: 600px;

height: 400px;

margin: 10px auto;

}

h3{

font-size: 16px;

}

这是子页面

//给父页面传数据

var txt = '我是子界面主动传值给父界面的数值';

parent.getchildvalue(txt); //getvalue是父界面的js 方法

//获取父页面传来的数据

var getparentvule = window.parent.tochildvalue();

console.log(getparentvule)