JavaScript操作浏览器窗口

  • A+
所属分类:js教程
摘要

JavaScript操作浏览器窗口

窗口是Web浏览器中最重要的界面元素,JavaScript提供了许多操作窗口的工具,JavaScript处理窗口的方式与处理框架很相似(因为框架是位于总浏览器窗口中的文档窗口)。

今天学习了如何使用JavaScript打开关闭,更新和定位窗口,如何使用JavaScript将信息写入窗口,从而可以在运行时构建网页。

(一)打开新窗口

[html]

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Open a Window</title>

<script type="text/javascript" src="script01.js"></script>

</head>

<body bgcolor="#FFFFFF">

<h1>The Master of the House</h1>

<h2>Click on his name to behold he who must be adored</h2>

<h2><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> </body>

</html>

(二)打开多个窗口
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>About that Cat</title>
<script type="text/javascript" src="script02.js"></script>
</head>
<body bgcolor="#FFFFFF">
<h1>More pictures of our cat</h1>
<h2><a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> </body>
</html>

(三)关闭窗口
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Window Test</title>
<script type="text/javascript" src="script03.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<h1>Let's play with windows!</h1>
<h3>
<a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> </h3>
</div>
</body>
</html>

(四)把窗口放在指定位置
[html]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Window Test</title>
<script type="text/javascript" src="script06.js"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<h1>Let's play with windows!</h1>
<h3>
<a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> <a rel="external nofollow" target="_blank" href="https://www.aipgy.com/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy5waHAxLmNuLw=="> </h3>
</div>
</body>
</html>

以上四种操作所需的js脚本分别为以下scripti:
[javascript]
/**
* 打开新窗口(script1.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("images/pixel1.jpg", "catWin", "resizable=no,width=350,height=260");
//注意在宽度和高度参数中的逗号之间不能有任何空格,如果有空格,那么脚本
//可能在某些浏览器中无效,
return false;
}
[javascript]
<pre class="javascript" name="code">/**
*打开多个窗口(script2.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=1;i<5;i++){
var imgName="images/pixel"+i+".jpg";
var winName="window"+i;
var catWindow=window.open(imgName, winName,"width=350,height=260");
}
}

[javascript]
/**
* 关闭窗口(script3.js)
*/
var newWindow=null;
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i<document.links.length;i++){
document.links[i].onclick=chgWindowState;
}
}

function windowOpen(){
if(newWindow&&!newWindow.closed){
return true;
}
return false;
}

function chgWindowState(){
if(this.id=="closeWin"){
if(windowOpen()){
newWindow.close();
}else{
alert("The window isn't open");
}
}
if(this.id=="openWin"){
if(windowOpen()){
alert("The window is already open!");
}else{
newWindow=window.open("", "newWin","toolbar,location=yes,width=300,height=200");
}
}
return false;
}
[javascript]
/**
* 把窗口放在指定的位置(script4.js)有时候希望在屏幕上的指定位置打开一个窗口,在这个示例中,用户可以选择在屏幕的四个角之一打开一个小窗口。
*/
var newWindow=null;
window.onload=newWinLinks;

function newWinLinks(){
for(var i=0;i<documeng.links.length;i++){
document.links[i].onclick=chgWindowState;
}
}

function windowOpen(){
if(newWindow&&!newWindow.closed){
return true;
}
return false;
}

function chgWindowState(){
if(this.id=="closeWin"){
if(windowOpen()){
newWindow.close();
}else{
alert("The window isn't open");
}
return false;
}
var topPos=0;
var leftPos=0;

if(this.id.indexOf("bottom")>-1){
topPos=screen.availHeight-200;
}
if(this.id.indexOf("Right")>-1){
leftPos=screen.availWidth-300;
}
if(windowOpen()){
newWindow.moveTo(leftPos,topPos);
}else{
newWindow=window.open("","newWin","toolbar,location=yes,width=300,height=200,left="+leftPos+",top="+topPos);
}
return false;
}

opener和parent比较:
window.opener其实是指本窗口的父窗口,比如,parWin.js通过window.open弹出了childWin.jsp,那么在childWin.js里面的window.opener就是指parWin.jsp,所以在childWin.js里面完全可以用window.opener调用任何一个parWin.jsp里面的方法,实现parWin.jsp和childWin.jsp的交互。
window.parent 是iframe页面调用父页面对象,比如一个parWin页面利用iframe或frame调用childWin页面,那么parWin页面所在窗口就是childWin页面的parent。

除非注明,否则均为@蒲公英网原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.aipgy.com/337548.html

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: