5.1 防止页面显示在框架中

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

if (top.location != self.location) {
top.location.replace(self.location);
}

5.2 设置目标

在接下来的示例中，我们会看到一份常规的 HTML 页面，其中包含一小块区域，即 iframe。

<!DOCTYPE html>
<html>
<head>
<title>iframe 1</title>
<script src="script02.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<iframe src="iframe01.html" id="icontent" name="icontent"></iframe>
<h1>Main Content Area</h1>
<h2>
<a href="page1.html">Link 1</a><br>
<a href="page2.html">Link 2</a><br>
<a href="page3.html">Link 3</a>
</h2>
</body>
</html>

CSS设置

body {
background-color: #FFF;
}
iframe#icontent {
float: right;
border: 1px solid black;
width: 350px;
height: 300px;
margin-top: 100px;
}

iframe

body {
background-color: #FFF;
}
iframe#icontent {
float: right;
border: 1px solid black;
width: 350px;
height: 300px;
margin-top: 100px;
}

.js

window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].target = "icontent";
}
}

5.3 用 JavaScript 加载 iframe

window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = setContent;
}
}
function setContent() {
document.getElementById("icontent").contentWindow.document.location.href = this.href;
return false;
}

return false;
最后， setContent()返回 false，意味着告知浏览器不要将 href 一并载入主窗口。否则两者都会
被载入。这是因为所有的功能都通过 JavaScript 实现了，所以无需载入 href。

5.4 iframe 的使用

window.onload = initLinks;
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = writeContent;
document.links[i].thisPage = i+1;
}
}
function writeContent() {
var newText = "<h1>You are now looking at example " + this.thisPage + ".<\/h1>";
document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
return false;
}

为什么第 2 步中斜杠（“/”）前面会有反斜杠（“\”）？根据标准，浏览器可能会把结束标签的
起始字符（“</”）理解为代码行的结尾。反斜杠将斜杠转义，让我们在不引起错误的情况下写
出 HTML

5.5 创建动态 iframe

window.onload = initLinks;
var pageCount = new Array(0,0,0,0);
function initLinks() {
for (var i=0; i<document.links.length; i++) {
document.links[i].onclick = writeContent;
document.links[i].thisPage = i+1;
}
}
function writeContent() {
pageCount[this.thisPage]++;
var newText = "<h1>You are now looking at example " + this.thisPage;
newText += ".<br>You have been to this page ";
newText += pageCount[this.thisPage] + " times.<\/h1>";
document.getElementById("icontent").contentWindow.document.body.innerHTML = newText;
return false;
}

var pageCount = new Array(0,0,0,0);
全局变量

5.6 在文档之间共享函数

<!DOCTYPE html>
<html>
<head>
<title>iframe 5</title>
<link rel="stylesheet"href="script01.
css">
</head>
<body>
Today's featured site:
<img src="images/spacer.gif" width="400" height="75" id="adBanner" alt="banner">
<iframe src="iframe02.html" id="icontent" name="icontent" ></iframe>
<h1>Main Content Area</h1>
<h2>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a>
</h2>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Content iframe</title>
<script src="script06.js"></script>
</head>
<body>
Please load a page
</body>
</html>

window.onload = initLinks;
var bannerArray = new Array("images/reading1.gif", "images/reading2.gif", "images/reading3.gif");
function initLinks() {
for (var i=0; i<parent.document.links.length; i++) {
parent.document.links[i].onclick = setBanner;
}
setBanner();
}
function setBanner() {
var randomNum = Math.floor(Math.random() * bannerArray.length);
parent.document.getElementById("adBanner").src = bannerArray[randomNum];
return false;
}

parent.document.getElementById(“adBanner”).src = bannerArray[randomNum];
主窗口仅通过其 id 就可以指向一个 iframe——它的子文档。但在 iframe 指向主窗口之前，它需要显式地指向其 parent。这里，我们获取该元素（一个 window）、其中的 document，以及 adBanner 元素。然后，将 adBanner 的 src 属性设置为数组的当前元素，也就是新的图片名称，将来会显示在页面上。最后，主窗口中的广告条会被设置为随机从该数组中选取。

5.7 打开新窗口

<br /> Opening a Window<br />

The Master of the House

Click on His name to behold He Who Must Be Adored

Pixel

![在这里插入图片描述](https://img-blog.csdnimg.cn/ade3459d6b284e79b655ba3329dc03e9.png#pic_center)

window.onload = newWinLinks;
function newWinLinks() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}
function newWindow() {
var catWindow = window.open("images/pixel1.jpg","catWin","resizable=no,width=350,height=260");
return false;
}

var catWindow = window.open(“images/pixel1.jpg”,“catWin”,“resizable=no,width=350,height=260”);

5.8 为窗口加载不同的内容

如果切换回主窗口，单击另一个链接的话，小窗口中的图片会被新图片替换掉

window.onload = newWinLinks;
function newWinLinks() {
for (var i=0; i<document.links.length; i++) {
if (document.links[i].className == "newWin") {
document.links[i].onclick = newWindow;
}
}
}
function newWindow() {
var catWindow = window.open(this.href,"catWin","width=350,height=260");
catWindow.focus();
return false;
}

JavaScript 学习笔记 - 5 窗口与框架相关推荐

JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别
JavaScript:学习笔记(7)--VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...
JavaScript学习笔记（三）---事件、正则表达式、ES6、运动
JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...
JavaScript 学习笔记（第三天）
JavaScript 学习笔记(第三天) 一.数组 1.1.数组的基础 1.2.数据类型分类 1.3.创建数组 1.3.1.字面量创建一个数组 1.3.2.内置构造函数创建数组 1.4.数组的基本操作 ...
【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
JavaScript 学习笔记（二）
JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象什么是JSON对象 JSON对象与Javascript对象的区别在JavaS ...

JavaScript 学习笔记 - 5 窗口与框架

目录