一、打開窗口
1.html代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Opening a window</title>
</head>
<body>
<h1>The Master of the House </h1>
<h2>Click on his name to behold he who Must Be Adored </h2>
<h2><a href="#" class="newWin" >Pixel</a></h2>
<script type="text/javascript" src="../js/Opening a window.js"></script>
</body>
</html>
2.js代碼：
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("../img/cat.jpg","","resizable=no,width=350,height=260");
// return false;
}
3.output:
opening a window
二、將不同的內(nèi)容加載進(jìn)窗口中
1.html代碼 ：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Opening a window</title>
</head>
<body>
<h1>More pictures of our cat </h1>
<h2>Click on the description to see his mood </h2>
<h2><a href="../img/happy-cat.jpeg" class="newWin" >Happy</a></h2>
<h2><a href="../img/tired-cat.jpg" class="newWin" >Tired</a></h2>
<h2><a href="../img/sleepy-cat.jpg" class="newWin" >Sleepy</a></h2>
<script type="text/javascript" src="../js/Opening a window.js"></script>
</body>
</html>
2.js代碼：
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,"","resizable=no,width=350,height=260");
catwindow.foucs();
return false;//阻止默認(rèn)跳轉(zhuǎn)
}
三、打開多個(gè)窗口
1.html代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Opening a window</title>
</head>
<body>
<h1>More pictures of our cat </h1>
<h2><a href="#" class="newWin">Click here to see him</a> </h2>
<script type="text/javascript" src="../js/Opening a window.js"></script>
</body>
</html>
2.js代碼：
window.onload =newWinLinks;
function newWinLinks() {
for (var i=0;i<document.links.length;i++){
if(document.links[i].className=="newWin"){
document.links[i].onclick=newWindows;
}
}
}
function newWindows(){
for(var i=0;i<3;i++){
var imgName="../img/cat"+i+".jpg";
// 第二個(gè)參數(shù)為關(guān)鍵值，只有每個(gè)窗口的名稱不一樣，才會(huì)打開新窗口
window.open(imgName,imgName,"resizable=no,width="+ 350 * i+",height=260");
}
return false;
}
3.output:
opening windows
四、從一個(gè)窗口更新另一個(gè)窗口
1.父窗口html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Big window</title>
</head>
<body>
<div align="center">
<h1>Welcome to this page ! </h1>
<form action="#">
<input type="text" size="20" id="msgLine" readonly="readonly">
</form>
</div>
<script type="text/javascript" src="../js/parent and child window.js"></script>
</body>
</html>
- 子窗口html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<title>Big window</title>
</head>
<body>
<h1>What's your name ? </h1>
<form action="#">
<input type="text" size="20" id="childField">
</form>
<script type="text/javascript" src="../js/parent and child window.js"></script>
</body>
</html>
3.js代碼：
window.onload=initWindows;
function initWindows(){
if(document.getElementById("childField")){
document.getElementById("childField").onchange=updateParent
}
else {
newWindow=window.open("child.html","newWin","status=yes,width=300,height=300");
}
}
function updateParent() {
opener.document.getElementById("msgLine").value="Hello"+this.value+"!";
}
