您的位置：首页 > 其它

BOM-frame对象和伪装的frame对象iframe

2014-03-08 21:22 344 查看

上篇博客中聊了聊BOM
,以及BOM 中的对象，那么，这篇博客，想唠唠BOM中一个有特色的对象——frame。在查资料的时候呢，还发现一个Iframe。他们有什么区别呢？那咱们接着看下面。

一、Frame

所谓框架便是网页画面分成几个框窗，同时取得多个URL。只需要
<FRAMESET><FRAME> 即可，而所有框架标记需要放在一个总起的html档，这个档只记录了该框架如何分割，不会显示任何资料，所以不必放入
<BODY>标记，浏览这框架必须读取这档案而不是其他框窗的档案。<FRAMESET>是用来划分框窗，每一窗框由一个
<FRAME>标记所标示，<FRAME>必须在
<FRAMESET> 范围中使用。

当一个window有多个frame，可以通过window.frames[]来实现对每个独立的窗口目标的引用，一些简单却很有用的属性在下表中列举出来：

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

实例：有一个叫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%,10%,*">
      <frame src="http://www.baidu.com/.html" name="frame1" id="frame1" />
      <frame src="http://www.baidu.com/.html" name="frame2" id="frame2" />
      <frame src="http://www.baidu.com/.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的方法。

二、Iframe

Iframe——in
+frame，是文档中的文档，或者叫浮动的框架（frame）。
iframe是一个需要注意的frame变种，用iframe可以让你不使用框架Frame，但是却可以嵌入页面,达到和frame的效果。
问题是，我们如何控制这些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>

//前台代码：

<html>
   <body>
     <iframe src="http://www.cnblogs.com/top5/archive/2010/10/20/1856280.html">      </iframe>
     <iframe src="http://blog.csdn.net/wangyongxia921"></iframe>
      <iframe src="http://blog.csdn.net/wangyongxia921"></iframe>
  </body>
</html>

效果图：

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

标签：

相关文章推荐

新的分享

章节导航