Window iframe

最新推荐文章于 2026-03-26 15:51:50 发布

转载最新推荐文章于 2026-03-26 15:51:50 发布 · 1.7k 阅读

标签

#iframe #javascript #xhtml #attributes #reference

JavsScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML中的Frame与IFrame的概念及应用方法，重点讲解了JavaScript如何控制Frame，包括如何通过不同方式获取Frame对象、操作Frame内容以及解决常见的Frame嵌套问题。

许多初学者在处理 frame 时往往会出现这样或那样的错误，其实，frame 是一个特殊的窗口类型，只要明白了他们之间的关系，可以很容易控制，本文摘译自 JavaScript 2.0-The Complete Reference 一书的英文第二版（仅摘录了对理解 frame 有直接关系的章节），文章详细介绍了 frame ，相信对新手理解 frame 会有很大帮助。

对 window 和 frame 关系的错误理解是web开发者中普遍存在的问题，从 (x) html 和 Javascript 来看，每个窗口中显示的 frame 都能很容易的控制，事实上，当一个 window 有多个 frame ，可以通过 window.frames[] 来实现对每个独立的窗口目标的引用，一些简单却很有用的属性在下表中列举出来：

Window 属性	说明
frames[]	存放当前窗口中所有frame对象的数组。
length	窗口 frame 的数目，和 window.frames.length 等同。
name	当前窗口的名字，自 JavaScript 1.1 起，这个值是可读写的。
parent	对父窗口的引用。
self	对窗口自身的引用。
top	对最高级别窗口的引用，这个值通常和parent一致，除非 frame 中有更多的 frame。
window	另外一个对当前窗口的引用。

想用 Javascript 控制 frame 最主要的是要把各自的名字和他们之间的关系弄清楚，如果你有一个叫 frames.html 的页面，页面代码如下：

<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>FrameSet
 Test</title>

<meta

http-equiv="content-type"

content="text/html;
 charset=ISO-8859-1" 
/>

</head>

<frameset

rows="33%,*,33%">

      <frame

src="framerelationship.html"

name="frame1"

id="frame1"

/>

      <frame

src="moreframes.html"

name="frame2"

id="frame2"

/>

      <frame

src="framerelationship.html"

name="frame5"

id="frame5"

/>

</frameset>

</html>

在这种情况下，当前文档主体可以看作是三个 frame （frame1,frame2, and frame5）的 parent ，你可以使用下面的方式取得 frame 数目：

window.frames.length

你如果在三个子 frame 中运行代码，可以用下面的方法：

window.parent.frames.length

或者

parent.frames.length

parent 表示一个窗体的父窗体，也可以用 top 来表示最高级别的窗体，这样可以写成 top.frames.length ，但是需要注意的是：除非你有嵌套 frame ，否则 parent 和 top 通常表示的是一个对象。

访问一个 frame ，可以用 name 或者下标的方式查询 frames 数组，parent.frames[0].name 将会输出第一个 frame 的名字，在我们的例子中就是 frame1，同样，我们也可以用 parent.frame1 或者 parent.frames["frame1"] 来实现相同的操作，记住，一个 frame 就是一个 window，知道这个，就可以使用所有Window 和 Document 的方法。

当理解了 frame 之间的关系，可以很容易的通过 parent.frames[] 操作任何 frame ，假如你有一个简单的框架页面：

<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Two
 Frames</title>

<meta

http-equiv="content-type"

content="text/html;
 charset=ISO-8859-1" 
/>

</head>

<frameset

cols="300,*">

      <frame

src="navigation.html"

name="frame1"

id="frame1"

/>

      <frame

src="content.html"

name="frame2"

id="frame2"

/>

</frameset>

</html>

在 navigation 窗体里面，你可以通过下面的方式设置一个对 content 窗体引用的变量：

var contentFrame = parent.frames[1]; // 或者使用名称

iframe 是一个需要注意的 frame 变种，用iframe可以让你不使用框架，但是却可以嵌入页面，问题是，我们如何控制这些 iframe ？事实上，我们也可以用 frames[] 的方法，此外，如果你的 iframe 有命名，可以通过getElementById 来操控，示例如下：

<iframe

src="http://www.google.com"

name="iframe1"

id="iframe1"

height="200"

width="200"></iframe>

<form

action="#"

method="get">

<input

type="button"

value="Load
 by Frames Array"

 onclick="frames['iframe1'].location='http://www.javascriptref.com';"

/>

<input

type="button"

value="Load
 by DOM"

 onclick="document.getElementById('iframe1').src='http://www.pint.com';"

/>

</form>

可以通过在链接标签里面加上 target 来将操作指向目标 frame ：

<a href="http://www.google.com" target="framename">Google</a>

注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:
document.getElementById(“ifr”);
window.frames[“ifr”];

要想使用iframe内的函数,变量就必须通过第二种方法.因为它取的是一个完整的DOM模型(不知道这样说对不对).

第一种方法只是取出了一个OBJECT而已.

如果只想改变iframe的 src 或者 border , scrolling 等 attributes,就需要用到第一种方法.

如果想取得iframe的页面(不是iframe本身),就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法.

还要注意的是,如果在iframe的页面未完全装入的时候,调用iframe的DOM模型,会发生很严重的错误,所以,你要准备一个容错模式.