您的位置：首页 > Web前端 > JavaScript

js各框架中的互相访问

2015-08-01 10:53 567 查看

框架中的互相访问也是一个常常碰到的问题。每次总感觉记得不是很清楚，因此记录下来。

在父窗口获取iframe里头的元素对象
window.iframes["iframe的name"].document.getElementById("iframe里头的dom元素对象")

在子窗口获取父窗口里头的元素对象
window.parent.document.getElementById("父窗口里头的dom元素对象")
或者是
（第一个getElementById对象是子框架ID）
　　 document.getElementById("xxx").contentWindow.document.getElementById("xxxx");

兄弟框架之间的互相访问
  如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：
＜frameset rows="50%,50%"＞
＜frame src="1.html" name="frame1" /＞
＜frame src="2.html" name="frame2" /＞
＜/frameset＞

  在frame1中可以使用如下语句来引用frame2：
self.parent.frames["frame2"];

不同层次框架间的互相引用
框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：
self.parent.frames["childName"].frames["targetFrameName"];

对顶层框架的引用
和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}

对打开当前页面的窗口引用

window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，这个时候针对b.htm来说window.opener就是a.htm这个窗口。最常见应用就是比如通过百度打开了一个新的页面，那么针对新页面来说百度的窗口就是window.opener

例子：
父窗口gundong.html代码页：
<html>
<head>
<script type="text/javascript" src="http://192.168.0.247:1234/jscommon/jquery.js"></script>
<style type="text/css">
.fixtopclass {position:fixed;top:0px;z-index:100;}
.fixclass {position:fixed;z-index:100;);
</style>
<script type="text/javascript">
$(function(){
var frameobj;
$("ul li").on('click',function(i){
frameobj = window.frames["result"].document.getElementById('show');
var inner = $(this).text();
frameobj.innerHTML = "<font style='color:#ff0000'>"+inner+"</font>";
return false;
});

})

function test(){
var frameobj = document.getElementById("result").contentWindow.document.getElementById('show');
frameobj.innerHTML = "<font style='color:#ff0000'>我是大幅度改变你的内容</font>";
}

</script>
</head>

<body>
<ul>

<li><a target="result">好评</a></li>

<li><a target="result">中评</a></li>

<li><a target="result">差评</a></li>
<div id="test" onclick="test()">框架间的互相访问</div>

</ul>

<iframe name="result" id="result" width="300px" height="200px" src="frame.html"></iframe>
</body>
</html>

子窗口frame.html：
<html>
<head>
<script type="text/javascript" src="http://192.168.0.247:1234/jscommon/jquery.js"></script>
<style type="text/css">
.fixtopclass {position:fixed;top:0px;z-index:100;}
.fixclass {position:fixed;z-index:100;);
</style>
<script type="text/javascript">
function getparent()
{
var parentobj = window.parent.document.getElementById('test');
parentobj.innerHTML = "<font style='color:#ff0000'>我改变父框架div的内容1</font>";

}
</script>
</head>

<body>
<div id="show">看看上级框架能否获取到我!</div>
<input type="button" name="bt1" id="bt1" value="点击我" onclick="getparent()"></input>
</body>
</html>
参考：http://blog.csdn.net/doymm2008/article/details/5695541
  http://computer.uoh.edu.cn/javascript/1329.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航