操作浏览器窗口

一、打开窗口
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>
  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>
        <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+"!";
}

推荐阅读更多精彩内容