你的位置: Kiyo'Space首页 JavaScript/Jscript 阅读文章 欢迎留下您的足迹

再论弹出窗口

[ JavaScript/Jscript ] 分享

(一)我们可以不用window.open的方法打开一个窗口,用下面的方法也可以作到:


代码如下:

<form action="example2.htm" target="anotherWindowName">
<input type="SUBMIT" value="Open new window" name="SUBMIT">
</form>

(二)下面的例子首先用传统的方法打开一个小窗口,然后通过右面的连接将一个新的内容写入这个弹出的窗口中。

将文件调入弹出的窗口

代码如下:

<script language="JavaScript">
<!--
function openwin(){
window.open('sample1.htm','myWindow');
}
//-->
</script>
<a href="sample2.htm" target="myWindow">
将文件写入弹出窗口</a>

(三)如果要显示一张图片,下面的方法也可以:


<form>
<input type="BUTTON" onClick="window.open('picture.gif','','width=150,height=100')" name="BUTTON" value="open picture">
</form>

(四)下面是一个弹出窗口的生成器:

URL Name Width Height Directories Location Menubar Scrollbars Status Toolbar Resizeable

源代码如下:

<SCRIPT LANGUAGE="JavaScript">
<!--
function createWindow(what) {
var URL = what.URL.value;

var windowName = what.windowName.value;

var features =
'width=' + what.width.value +
',height=' + what.height.value +
',directories=' + (what.directories.checked - 0) +
',location=' + (what.location.checked - 0) +
',menubar=' + (what.menubar.checked - 0) +
',scrollbars=' + (what.scrollbars.checked - 0) +
',status=' + (what.status.checked - 0) +
',toolbar=' + (what.toolbar.checked - 0) +
',Resizeable=' + (what.Resizeable.checked - 0);

window.open (URL, windowName, features);
}
//--></SCRIPT>

<FORM>
URL <INPUT TYPE="TEXT" NAME="URL" VALUE="testpage.htm">
Name <INPUT TYPE="TEXT" NAME="windowName" VALUE="myWindow">
Width <INPUT TYPE="TEXT" NAME="width" VALUE="200">
Height <INPUT TYPE="TEXT" NAME="height" VALUE="200">
<INPUT TYPE="CHECKBOX" NAME="directories"> Directories
<INPUT TYPE="CHECKBOX" NAME="location"> Location
<INPUT TYPE="CHECKBOX" NAME="menubar"> Menubar
<INPUT TYPE="CHECKBOX" NAME="scrollbars"> Scrollbars
<INPUT TYPE="CHECKBOX" NAME="status"> Status
<INPUT TYPE="CHECKBOX" NAME="toolbar"> Toolbar
<INPUT TYPE="CHECKBOX" NAME="Resizeable"> Resizeable
<INPUT TYPE="BUTTON" VALUE="Create It"
onClick="createWindow(this.form)">
</FORM>

(五)弹出窗口是非常容易失去“焦点”的,即只要鼠标点击窗口以外的任意位置该弹出窗口的焦点就失去了。

用下面的方法可以对其进行控制,将如下代码加入弹出窗口中:

<BODY onBlur="window.focus()">

但是,这样做有一个缺陷,即弹出的窗口永远被“聚焦”了,除非你强制关闭它。

没有关系,只要给它加一个“超时控制”即可,即让它只聚焦几秒钟,在这段事件内,访问者有足够的时间看清楚弹出窗口内的内容,然后只要用鼠标点窗口以外的任意位置,就自动关闭了。

<BODY onBlur="setTimeout=('window.focus()',1000)">

<BODY onBlur="window.close()">

(六)定位你的窗口,使用screenX ,screenY(NS4) ,top ,left(IE4) 属性。

window.open('testpage.htm','myExample6','width=200,height=200,screenX=400,screenY=400,top=400,left=400');

(七)有没有想过让你的窗口永远居中?即不论窗口的大小时多少,一律显示在窗口的中间?用下面的脚本即可:

<SCRIPT LANGUAGE="JavaScript">
<!--
function centerWindow() {
if (document.all)
var xMax = screen.width, yMax = screen.height;
else
if (document.layers)
var xMax = window.outerWidth, yMax = window.outerHeight;
else
var xMax = 640, yMax=480;

var xOffset = (xMax - 200)/2, yOffset = (yMax - 200)/2;

window.open('center.htm','myExample7', 'width=200,height=200,screenX='+xOffset+',screenY='+yOffset+', top='+yOffset+',left='+xOffset+'');
}

centerWindow();
//-->
</SCRIPT>

注意:本例的打开的窗口是200*200的,如果你的窗口不是这个尺寸,将上面的兰色部分改一下即可。

测试一下吧:


 

(八)下面的代码可以实现窗口内容的转跳,先打开一个窗口,经过3秒钟后页面自动跳转到另一个页面。


<SCRIPT LANGUAGE="JavaScript">
<!--
myWindow8 = window.open('blank.htm','myExample8','width=200,height=200');
setTimeout("myWindow8.location.href = 'testpage.htm'",3000);
//-->
</SCRIPT>

(九)窗口内容的重写:


<SCRIPT LANGUAGE="JavaScript">
<!--
msgWindow9 = window.open('testpage.htm','myExample9','width=200,height=200');
function update() {
for (var i=0; i < 10; i++)
msgWindow9.document.write('Message number ' + i + '<BR>');
}
setTimeout('update()',3000);
//3秒钟后写入。
//-->
</SCRIPT>

说明:注意兰色部分相同,本例使用了一个循环写,作为演示比较清楚,你可以使用.document.write的方法将任何内容写入窗口中。

 


欢迎在此留下您的脚步






评论内容 (*必填):
(Ctrl + Enter 快速提交)