第五章、窗口与框架
5.2 设置目标
源代码：
//主页面：Captain.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Captain</title>
<link rel="stylesheet" href="script.css" />
<script src="scripts/ShowAlert.js"></script>
</head>
<body>
<iframe src="iframe.html" id="icontent" name="icontent"></iframe>
<h1>Main Content Area</h1>
<h2>
<a href="html/page1.html">Link 1</a><br />
<a href="html/page2.html">Link 2</a><br />
<a href="html/page3.html">Link 3</a>
</h2>
</body>
</html>
//css文件：script.css
body {
background-color: #FFF;
}
iframe#icontent {
float: right;
border: 1px solid black;
350px;
height: 300px;
margin-top: 100px;
}
//显示在iframe中的初始页面：iframe.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Content iframe</title>
</head>
<body>
Please load a page
</body>
</html>
//用JS来设置框架：
window.onload = initLinks; //window.onload = methodName：表示在页面加载时，调用methodName函数
function initLinks() {
for (var i = 0 ; i < document.links.length; i++) { //获取页面的所有链接
document.links[i].target = "icontent"; //将a元素的target属性设置为iframe的name属性，就可以将a元素链接的 //内容显示到iframe内。（不过有些浏览器要求用id来设置，所以最好可以将id和name都相同设置。）
}
}