JavaScript操作浏览器窗口

高洛峰

发布： 2016-11-26 09:35:17

原创

1396人浏览过

窗口是web浏览器中最重要的界面元素，javascript提供了许多操作窗口的工具，javascript处理窗口的方式与处理框架很相似（因为框架是位于总浏览器窗口中的文档窗口）。
今天学习了如何使用javascript打开关闭，更新和定位窗口，如何使用javascript将信息写入窗口，从而可以在运行时构建网页。
(一)打开新窗口
[html]

    open a window

the master of the house

click on his name to behold he who must be adored

(二)打开多个窗口
[html]

    About that Cat

More pictures of our cat

(三)关闭窗口
[html]

    Window Test

Let's play with windows!

(四)把窗口放在指定位置
[html]

    Window Test

Let's play with windows!

以上四种操作所需的js脚本分别为以下scripti：
[javascript]
/**
* 打开新窗口(script1.js)
*/
window.onload=newWinLinks;

function newWinLinks(){
    for(var i=0;i        if(document.links[i].className=="newWin"){
            document.links[i].onclick=newWindow;
        }
    }
}

function newWindow(){
    var catWindow=window.open("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260");
    //注意在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本
    //可能在某些浏览器中无效，
    return false;
}
[javascript]

/**<br> *打开多个窗口(script2.js) 在每次点击屏幕上的一个控件时，通过创建的脚本代开不同的窗口<br> */ <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ <br>    for(var i=0;i<document.links.length></document.links.length>        if(document.links[i].className="newWin"){ <br>            document.links[i].onclick=newWindows; <br>        } <br>    } <br>} <br> <br>function newWindows(){ <br>    for(var i=1;i        var imgName="images/pixel"+i+".jpg"; <br>        var winName="window"+i; <br>        var catWindow=window.open(imgName, winName,"width=350,height=260"); <br>    } <br>} <br> <br>[javascript]<br>/**<br> * 关闭窗口(script3.js)<br> */ <br>var newWindow=null; <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ <br>    for(var i=0;i<document.links.length></document.links.length>        document.links[i].onclick=chgWindowState; <br>    } <br>} <br> <br>function windowOpen(){ <br>    if(newWindow&amp;&amp;!newWindow.closed){ <br>        return true; <br>    } <br>    return false; <br>} <br> <br>function chgWindowState(){ <br>    if(this.id=="closeWin"){ <br>        if(windowOpen()){ <br>            newWindow.close(); <br>        }else{ <br>            alert("The window isn't open"); <br>        } <br>    } <br>    if(this.id=="openWin"){ <br>        if(windowOpen()){ <br>            alert("The window is already open!"); <br>        }else{ <br>            newWindow=window.open("", "newWin","toolbar,location=yes,width=300,height=200"); <br>        } <br>    } <br>    return false; <br>} <br>[javascript]<br>/**<br> * 把窗口放在指定的位置(script4.js)有时候希望在屏幕上的指定位置打开一个窗口，在这个示例中，用户可以选择在屏幕的四个角之一打开一个小窗口。<br> */ <br>var newWindow=null; <br>window.onload=newWinLinks; <br> <br>function newWinLinks(){ <br>    for(var i=0;i<documeng.links.length></documeng.links.length>        document.links[i].onclick=chgWindowState; <br>    } <br>} <br> <br>function windowOpen(){ <br>    if(newWindow&amp;&amp;!newWindow.closed){ <br>        return true; <br>    } <br>    return false; <br>} <br> <br>function chgWindowState(){ <br>    if(this.id=="closeWin"){ <br>        if(windowOpen()){ <br>            newWindow.close(); <br>        }else{ <br>            alert("The window isn't open"); <br>        } <br>        return false; <br>    } <br>    var topPos=0; <br>    var leftPos=0; <br>     <br>    if(this.id.indexOf("bottom")&gt;-1){ <br>        topPos=screen.availHeight-200; <br>    } <br>    if(this.id.indexOf("Right")&gt;-1){ <br>        leftPos=screen.availWidth-300; <br>    } <br>    if(windowOpen()){ <br>        newWindow.moveTo(leftPos,topPos); <br>    }else{ <br>        newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+",top="+topPos); <br>    } <br>    return false; <br>} <br> <br>opener和parent比较：<br>window.opener其实是指本窗口的父窗口，比如，parWin.js通过window.open弹出了childWin.jsp,那么在childWin.js里面的window.opener就是指parWin.jsp，所以在childWin.js里面完全可以用window.opener调用任何一个parWin.jsp里面的方法，实现parWin.jsp和childWin.jsp的交互。<br>window.parent 是iframe页面调用父页面对象，比如一个parWin页面利用iframe或frame调用childWin页面，那么parWin页面所在窗口就是childWin页面的parent。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>

登录后复制