补充资料转自:http://www.cnblogs.com/superfeeling/archive/2011/09/14/2176435.html
补充资料
1.opener:指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。
2.top:
该变更永远指分割窗口最高层次的浏览器窗口。
3.parent:
该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口,而在其中一个分割窗口中又包含着分割窗口,则第3层的分割窗口可以用parent变量引用第2层窗口,用top引用顶层窗口。
对于窗体中的frame和iframe加载的页面元素来说。parent 返回的时包含该iframe的页面窗口引用,top则返回最上层的窗口引用,self当然返回的仍然是自身的引用。
4. self,window都是获取当前页面窗口自身对象的引用
使用document.getElementById("IframeA")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等,但是不能获取到iframe所包含的子页面的各个对象。;
使用document.frames("IframeA")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等
1.html
<script>
function check(){
var obj1=document.getElementById("myframe");
alert(obj1.src);
//alert(obj1.window.document.myform.username.value);//Error
var obj2=document.frames("myframe");
alert(obj2.window.document.myform.username.value);
//alert(obj2.src);//Error
}
</script>
<body onload="check()">
<iframe id="myframe" name="myframe" src="2.html" frameborder="3" style="width:300;height:200;border-width:1;border-color:red;border-style:solid"></iframe>
</body>
2.html
<body>
<form name="myform">
用户名:<input type="text" name="username" value="test" />
</form>
</body>
附:Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系:Windwo对象→Parent对象→Frame对象→Document对象→Form对象,
如下:parent.frame1.document.forms[0].elements[0].value;
index.html包含两个iframe,两个iframe的src分别是index1.html和index2.html
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<iframe src="index1.html" width="100%" height="300" name='if1'>
</iframe>
<iframe src="index2.html" width="100%" height="300" name='if2'>
</iframe>
</body>
</html>
index1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
function init()
{
alert(parent.frames['if2'].document.getElementById('d2').innerText);
}
window.onload = init;
</script>
</head>
<body>
<div id='d1'>hello world</div>
</body>
</html>
index2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<div id='d2'>hello java</div>
</body>
</html>
分享到:
相关推荐
在具体的实现过程中,需要注意iframe中的内容必须和主页面出于同一个域中,否则会受到浏览器同源策略的限制,无法获取到其中的DOM元素。这是因为浏览器安全策略不允许跨域访问DOM。 首先,确保iframe元素在HTML页面...
`iframe`(Inline Frame)是一种可以在HTML文档中嵌入另一个HTML文档的元素,它允许我们实现页面分隔、加载外部资源或者创建独立的浏览上下文。在本篇中,我们将深入探讨如何使用JS来操作`iframe`中的DOM。 首先,...
标题 "拖拽一个iframe中的div 在另一个iframe页面中显示" 描述了在Web开发中一个交互性的技术,涉及跨框架(iframe)通信和DOM操作。这个技术主要应用于创建富交互的用户界面,允许用户在不同的iframe之间传递和操作...
在Web开发中,iframe元素常被用来嵌入另一个HTML文档到当前的页面中。有时候,我们需要在父页面与子页面(iframe内部页面)之间相互操作DOM元素,例如修改样式、获取内容等。原生JavaScript提供了一种方法来实现这种...
在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档,这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...
在网页开发中,有时我们需要在一个页面(子页面)中访问另一个页面(父页面)的数据或控制元素,这种情况下,`Iframe` 提供了一个解决方案。本文将深入探讨如何通过 `Iframe` 获取父页面的变量和控件。 首先,我们...
本文将详细介绍如何通过JavaScript(简称JS)来获取一个内嵌在当前页面中的iframe的内容。这种方法特别适用于那些需要动态加载或更新iframe内部数据的应用场景。我们将从基本原理出发,逐步深入到具体的实现细节,并...
在网页开发中,`iframe`(Inline Frame)是一种非常有用的元素,它允许我们在一个HTML文档中嵌入另一个HTML文档。这种技术常用于实现页面部分的动态加载、展示外部内容或进行页面间的通信。当我们需要从多个`iframe`...
通过创建一个iframe元素,并将其添加到文档中,可以实现在一个隔离的环境中进行打印,这样做的好处是用户可以打印页面的指定区域而不影响当前页面的其他内容。具体步骤如下: 1. 创建一个指定id的div元素作为打印...
根据提供的代码片段,“获取父页面iframe中id为name的元素值”,这里涉及到如何通过JavaScript访问`iframe`内的DOM元素: ```javascript // 获取名为"BoardList"的iframe中的元素 parent.frames["BoardList"]....
js控制/获取a.html中iframe加载的b.html中的iframe,很多人都以为getElementById可以直接获取,其实不行的,以上代码就解决了这个问题,js控制iframe加载页面的iframe,不过测试只在IE和火狐通过,谷歌不行,其他自...
在网页开发中,`iframe`(Inline Frame)是一种嵌入其他HTML文档的元素,它允许我们在一个页面中显示另一个页面的内容。本篇文章将深入探讨如何在`iframe`中调用JavaScript,实现父页面与子页面之间的方法交互。 一...
在网页开发中,有时我们需要在一个页面中嵌入另一个页面,这就是`iframe`元素的作用。`iframe`可以让网页在不离开当前页面的情况下加载其他HTML文档,从而实现内容的分块显示或者部分更新。在这个场景下,涉及到的一...
iframe 中的内容是由另一个域名下的网页提供的,这意味着我们无法直接访问 iframe 中的内容。这是由于同源策略(Same-Origin Policy)的限制。 同源策略是浏览器的一种安全机制,用于防止不同域名下的网页之间的...
其中,"js调用-嵌入iframe"是JS在处理页面元素,特别是与IFrame(内联框架)交互时的一个重要技术。IFrame允许在单一网页中嵌入另一个网页,从而实现内容的复用或隔离。下面我们将详细探讨这一主题。 **1. IFrame...
在网页开发中,`iframe`是一种常用的技术,用于在一个HTML页面中嵌入另一个HTML页面。然而,在实际应用中经常会遇到一个问题:即`iframe`的高度与内嵌页面的实际高度不匹配,导致页面布局出现问题或用户体验不佳。...
iframe的DOM操作 iframe的DOM操作 iframe的DOM操作 iframe的DOM操作
在网页设计中,`iframe` 是一种非常有用的元素,它允许我们在一个页面中嵌入另一个网页。当有多个 `iframe` 并存时,可能会出现重叠或者层级问题,特别是当其中某个 `iframe` 中有一个需要突出显示的 `div` 元素时。...
在IT领域,尤其是在Web开发中,`iframe`(Inline Frame)是一种非常重要的技术,它允许我们在一个HTML页面中嵌入另一个HTML页面。本实例“iframe对另一个iframe控制的Demo”展示了如何通过JavaScript或者jQuery实现...
在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对iframe内的页面进行跳转与刷新。本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和...