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

最新推荐文章于 2023-05-07 17:34:26 发布

_Cassie

最新推荐文章于 2023-05-07 17:34:26 发布

阅读量3.2k

点赞数

分类专栏： Javascript 文章标签： JAVASCRIPT

本文链接：https://blog.csdn.net/wangyongxia921/article/details/20798511

版权

Javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

上篇博客中聊了聊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"
                               οnclick="frames['iframe1'].location='http://www.javascriptref.com';" />
                   <input type="button" value="Load by DOM"
                              οnclick="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>

效果图：