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

Helloworld188888

已于 2022-12-08 18:07:10 修改

阅读量189

点赞数

分类专栏： JavaScript 文章标签： javascript 学习前端

于 2022-12-08 18:05:56 首次发布

本文链接：https://blog.csdn.net/qq_24951479/article/details/128240655

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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 打开新窗口

Opening a Window

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;
}