04. 窗口与框架

发表于 分类于 ，

标签 属性 意义
iframe 内部框架，它显示在进行调用的 HTML 页面中

  • name JavaScript 也可以使用这个属性引用 iframe
  • src iframe 页面的 URL

防止页面显示在框架中

别人可以将你的页面加载进他们站点上的框架中，使你的页面看起来就像是他们提供的内容。在 JavaScript 中，窗口形成一个层次结构，父窗口处于这个层次结构的顶层。当别人“拦截”你的页面时，他们会迫使它成为父窗口的子框架。图 5-1 显示当页面作为别人站点的一部分显示时的效果。可以使用脚本防止页面被拦截，并且迫使页面总是单独显示在浏览器窗口中。
JavaScript 可以迫使页面总是单独显示

1
2
3
if (top.location != self.location) {
  top.location.replace(self.location)
}

设置目标

所谓的 iframe 是一种内联框架。也就是说，它是一种可以嵌入常规 HTML 页面中的框架，并非必须置于框架集之内。与一般的框架一样，iframe 也是一份独立的 HTML 文档。可以将 iframe 作为一段脚本的目标，这样便可以在脚本的控制下，实时创建内容并脱离框架集将其显示在页面中。

在接下来的示例中，我们会看到一份常规的 HTML 页面，其中包含一小块区域，即 iframe。在主内容区域的链接可以通过目标区域作用于 iframe。要使用 HTML 加载 iframe，可以用 <a> 标签的 target 属性，这里就是这么做的。

打开新窗口

1
2
3
4
5
function newWindow() {
     var catWindow = window.open(this.href,"catWin","width=350,height=260");
     catWindow.focus();
     return false;
}
  • 这里使用 focus()方法使得我们新打开的窗口位于最前面。我们需要显示某个窗口时，就可以使用 focus()。如果同时有多个窗口打开，那么使用 focus()可以将指定窗口排列在最顶端。
  • 在第 4 步中使用到了 blur()，它是与 focus()作用相反的方法。使用 blur()方法可以将窗口置于所有打开窗口的最后面。窗口对象的 focus()和 blur()方法对应于 onfocus 和 onblur 事件处理程序，通过它们可以在窗口获得或者失去焦点时执行操作。

参考

第 5 章　窗口与框架-图灵社区
http://www.ituring.com.cn/book/tupubarticle/4838#