一、打开窗口
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
二、将不同的内容加载进窗口中
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;//阻止默认跳转
}
三、打开多个窗口
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";
// 第二个参数为关键值，只有每个窗口的名称不一样，才会打开新窗口
window.open(imgName,imgName,"resizable=no,width="+ 350 * i+",height=260");
}
return false;
}
3.output:
opening windows
四、从一个窗口更新另一个窗口
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+"!";
}
