iframe框架使用及调用方法汇总 - 演示iframe父子页面参数传递及相互调用
Iframe父页面

楼盘名称(house)：

向子页面传递参数
JS方法

document.getElementById('frameId').contentWindow.paramFromParent = '值';

frameName.window.paramFromParent = '值';

JQuery方法

$('#frameId')[0].contentWindow.paramFromParent = '值';

$(window.frames["frameName"])[0].paramFromParent = '值';

参数设置

参数值： （注：父页面传递的参数为：paramFromParent)

子页面接收参数：var values = window.paramFromParent; (values就是父页面传递过去的参数值)
获取子页面元素
JS方法

frameName.window.document.getElementById("room").value;

window.frames["frameId"].contentWindow.document.getElementById("room").value;

window.frames["frameName"].document.getElementById("room").value;

document.getElementById('frameId').contentWindow.document.getElementById("room").value;

JQuery方法

$('#frameId').contents().find('#room').val();

$(window.frames['frameName'].document).find('#room').val();

('#room',window.frames['frameName'].document).val();

alert($(document.getElementById('frameId').contentWindow.document.body).html());

取值展示框

子页面"房号"值：

获取子页面函数
JS方法

document.getElementById('frameId').contentWindow.sonMethod();

frameName.window.sonMethod();

frameName.sonMethod('js method three');

JQuery方法

$('#frameId')[0].contentWindow.sonMethod();

$(window.frames['frameName'])[0].sonMethod();

给子页面元素赋值
JS方法

frameName.window.document.getElementById("room").value = '值';

window.frames["frameId"].contentWindow.document.getElementById("room").value = '值';

window.frames["frameName"].document.getElementById("room").value = '值';

document.getElementById('frameId').contentWindow.document.getElementById("room").value = '值';

JQuery方法

$('#frameId').contents().find('#room').val('值').css('background-color','red');

$(window.frames['frameName'].document).find('#room').val('值');

$('#room',window.frames['frameName'].document).val('值');

赋值输入框

给子页面input赋值：

给子页面设置背景色
JS方法

if(numc==1) var childObj = document.getElementById('frameId');
var obj = (childObj.contentWindow || childObj.contentDocument);
if(obj.document) obj = obj.document;
obj.body.style.backgroundColor = '颜色值';

frameName.window.document.getElementById("room").style.backgroundColor = '颜色值';

frameName.window.document.getElementById("room").style.color = '颜色值';

JQuery方法

$('#frameId').contents().find('body').css('background-color','颜色值');

$(window.frames["frameName"].document).find('body').css('background-color','颜色值');

颜色值输入框

请输入颜色值，如green、#ff0000：