在js中，我们时常用到用iframe做系统框架，在子页面也，父页面之间的值传递是一个问题，下面是js获取父窗体和子窗体的对象js：
1在iframe子页面中获取父页面的元素：
a>windowparentdocument这个是获取父页面document中的对象；
b>如果要获取父页面js中的方法：windowparentxxxx（）；xxxx()为方法；
2在父页面中获取iframe子页面中的元素：
a>
var child =
documentgetElementByIdx_x("mainFrame")contentWindow;//mainFrame这个id是父页面iframe的id
childdocument;//获取子页面中的document对象；
js获取父页面的元素可以用$(windowparentdocument)find("#customer_id")val();这里的customer_id表示父页面某一个元素的id。
比如：父页面有一个隐藏的input框<input id="customer_id" type="hidden" value="${distributorcustomer_id}"/>，那么在子页面就可以用上述的语句取到父页面的id为customer_id的值。
windowparent与windowopener的区别 javascript调用主窗口方法
1： windowparent
是iframe页面调用父页面对象
举例:
ahtml
Html代码 <html>
<head><title>父页面</title></head>
<body>
<form name="form1" id="form1">
<input
type="text" name="username" id="username"/>
</form>
<iframe src="bhtml" width=100%></iframe>
</body>
</html>
如果我们需要在bhtm中要对ahtm中的username文本框赋值，就如很多上传功能，上传功能页在Ifrmae中，上传成功后把上传后的路径放入父页面的文本框中
我们应该在bhtml中写
Html代码
<script type="text/javascript">
var _parentWin =
windowparent ;
_parentWinform1usernamevalue = "xxxx" ;
</script>
实例地址： 实例/ahtml
源码：
1ahtml
Html代码
<html>
<head>
<title>主页面</title>
<script>
/ 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 /
var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";
function parentInvokeIFrame()
{
var
iframeTest = documentframes["iframeTest"];
//使用documentgetElementById("iframeTest");同样可以
alert(iframeTestdocumentbodyinnerHTML);
alert(iframeTestiFrameVair);
}
</script>
</head>
<body>
<form name="form1"
id="form1">
<input type="text" name="username"
id="username"/>
<input type = "button" value =
"父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>
</form>
<iframe src="bhtml" width = '100%' id =
'iframeTest'></iframe>
</body>
</html>
1bhtml
Html代码
<html>
<head>
<title></title>
<script
type="text/javascript">
/
为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 /
var iFrameVair =
"测试父窗体调用IFrame子窗体的全局函数";
function
UpdateParent()
{
var _parentWin =
windowparent ;
_parentWinform1usernamevalue = "xxxx"
;
}
function
childInvokeParent()
{
var parentVairous =
windowparentwindowparentVairous;
alert(parentVairous);
}
</script>
</head>
<body>
<form name="form1"
id="form1">
<p> </p>
<p
align="center">
<input type = "button"
name = "button"
id =
"button"
value = "更新主页面的UserName内容"
onclick = "UpdateParent()">
<input type = "button"
name = "button2"
id = "button2"
value
= "测试IFrame子窗口调用父窗口的全局变量"
onclick =
"childInvokeParent();"/>
</p>
<p>
</p>
</form>
</body>
</html>
ps:不能跨域获取，例如iframe的src是'>
JS子窗口调用父窗口的方法：
框架（iframe）形式，这时用到是windowparent， windowparent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身。可以用这一点特性来判断这个窗口是否是顶层窗口。详情如下：
1、1html代表的是父窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "<html xmlns="
<head>
<meta
2、2html代表的子窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "<html xmlns="
<head>
<meta ;
这时在子窗口（iframe窗口）所做的改变，会改变父窗口中username的值。
发现答非所问的人还不少啊
取父窗口的元素方法：$(selector, windowparentdocument);
那么你取父窗口的父窗口的元素就可以用：$(selector, windowparentparentdocument);
类似的，取其它窗口的方法大同小异
$(selector, windowtopdocument);
$(selector, windowopenerdocument);
$(selector, windowtopframes[0]document);
希望对你能有帮助
objclientWidth //获取元素的宽度
objclientHeight //元素的高度
objoffsetLeft //元素相对于父元素的left
objoffsetTop //元素相对于父元素的top
objoffsetWidth //元素的宽度
objoffsetHeight //元素的高度
区别：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的宽度
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=eoffsetTop;
if(eoffsetParent!=null) offset+=getTop(eoffsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=eoffsetLeft;
if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);
return offset;
}
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=eoffsetTop;
if(eoffsetParent!=null) offset+=getTop(eoffsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=eoffsetLeft;
if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);
return offset;
}
1、建立父级页面，首先建立一个父级页面parenthtml,代码如图，一个pop函数方法，一个链接到childhtml的iframe标签；
2、建立子页面，再新建一个childhtml页面，如图，展示一个id=link的div标签，和link的点击事件，因为是调用父级方法，所以需要用到windowparentpop()方法。
3、预览页面，预览页面，可明显看到parenthtml里面的iframe框架，指向的就是child子页面
4、错误提示，点击页面中“调用父级pop方法”的文字链，会提示错误，这是因为没配置好域名等相关设置。
5、站点配置，打开iis，右键iframe文件夹——“管理文件夹”——“浏览”；即可打开本地测试地址；（如小伙伴没配置iis，需要先配置iis建立站点）
6、成功调用父级方法，再次点击“调用父级pop方法”的文字链，即可成功d出提示。
以上就是关于JS如何获取对象的父对象(非文档对象)全部的内容，包括:JS如何获取对象的父对象(非文档对象)、jsd框怎么获得父页面的元素、javascript 子页面调用父页面中的js方法function test()等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）