第五章、窗口与框架
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都相同设置。)
}
}