视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript操作浏览器窗口
2020-11-27 20:30:51 责编:小采
文档


窗口是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 href="http://www.php1.cn/"> </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 href="http://www.php1.cn/"> </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 href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> </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 href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> <a href="http://www.php1.cn/"> </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。

下载本文
显示全文
专题