aitangyong

通过和看JavaScript中window对象parent、self、top的区别

、、这3个html元素的区别，可以参考这篇文章"frame,iframe,frameset之间的关系与区别"。标准的使用方式如下：</span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;"></span></span></p> <pre><code class="language-html"> <html> <head></head> <body> <iframe src="xxx.html">

可以看到a.html能够通过或者包含另一个b.html，而b.html中也可以用同样的方式嵌套c.html。这样就在不同的html之间形成了明显的层次(父子)关系。我们知道每一个html都对应1个js的window对象，既然html有层次关系，window对象也同样有层次关系，而这层次关系就是通过top和parent、self这3个属性来表现的。</span></p> <p><span style="font-size:18px;"><br></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;">1.在任何html页面中(window.self == window)，self和window都是获取当前窗口自身的window对象。</span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;">2.top用来获取最顶层的窗口对象，而parent只是获取当前窗口的父窗口。如果当前窗口是最顶层的窗口，那么window.parent == window.top == window.self。如果a.html-->b.html-->c,html通过<frameset>或者<iframe>形成了层次关系，那么在c.html中，window.parent获取的是b.html的窗口，window.top获取的是a.html的窗口。</span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;">3.通过<a>打开的页面和原来页面之前没有这种父子关系。</span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;"><br></span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;">现在我们知道了html页面之间的这种层次关系，现在我们看下不同html之间如何获取彼此的数据。参考“在同一个页面中的一个iframe中用js获取另一个iframe的dom”这篇文章。</span></span></p> <p><span style="font-size:18px;"><span style="font-size:18px;"></span></span></p> <pre><code class="language-html">main.html <html> <script> function init() { var obj1=document.getElementById("myframe"); alert(obj1.src); //alert(obj1.window.document.myform.username.value);//错误 var obj2=document.frames("myframe"); alert(obj2.window.document.myform.username.value); //alert(obj2.src);//错误 } </script> <body οnlοad="init();"> <iframe id="myframe" name="myframe" src="child.html" frameborder="3" style="width:300;height:200;"> child.html

可以看到关键就是通过:window.document.getElementById()和window.document.frames获取