您的位置：首页 > Web前端 > JavaScript

js怎么样控制打开网页窗口的大小

2012-11-06 18:34 525 查看

javascript ,js怎么样控制打开网页窗口的大小,HTML如何关闭窗口大全(经典+有用+常用)

打开窗口即最大化

<script language="JavaScript">



</script>

----------------------------------------------------------------

window.open方法

<a href="#"

　onclick="javascript:window.open('文件路径/文件名','newwindow',

　'toolbar=no,scrollbars=yes,resizable=no,top=0,left=0,

　width=400,height=300');">文字或图片</a>

top=0,left=0,是打开网页的坐标定位

width=400,height=300' 是打开的网页的大小

我的窗口，我控制.....

【1、普通的弹出窗口】

其实代码非常简单：

<SCRIPT LANGUAGE=javascript>



</SCRIPT>

　　因为这是一段javascripts代码，所以它们应该放在<SCRIPT

LANGUAGE=javascript>标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

　window.open ('page.html')

用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。

　　用单引号和双引号都可以，只是不要混用。

　　这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

　　【2、经过设置后的弹出窗口】

　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<SCRIPT LANGUAGE=javascript>



</SCRIPT>

　　参数解释：

<SCRIPT LANGUAGE=javascript> js脚本开始；

window.open 弹出新窗口的命令；

'page.html' 弹出窗口的文件名；

'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

</SCRIPT> js脚本结束

　　【3、用函数控制弹出窗口】

　　下面是一个完整的代码。

<html>

<head>

<script LANGUAGE=javascript>



</script>

</head>

<body onload=openwin()>

..任意的页面内容...

</body>

</html>

　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

怎么调用呢？

　　方法一：<body onload=openwin()> 浏览器读页面时弹出窗口；

　　方法二：<body onunload=openwin()> 浏览器离开页面时弹出窗口；

　　方法三：用一个连接调用：

<a href=注意：使用的“　方法四：用一个按钮调用：

<input type=button onclick=openwin() value=打开窗口>

　　【4、同时弹出2个窗口】

　　对源代码稍微改动一下：

<script LANGUAGE=javascript>



</script>

　　为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。

注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

　　【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

　　如下代码加入主窗口<head>区：

<script language=javascript>



</script>

加入<body>区：

<a href=1.htm onclick=openwin()>open</a>即可。

　　【6、弹出的窗口之定时关闭控制】

　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？

　　首先，将如下代码加入page.html文件的<head>区：

<script language=javascript>

function closeit() {

setTimeout(self.close(),10000) //毫秒

}

</script>

　然后，再用<body onload=closeit()>

这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

　　【7、在弹出窗口中加上一个关闭按钮】

<FORM>

<INPUT TYPE='BUTTON' value='关闭' onClick='window.close()'>

</FORM>

呵呵，现在更加完美了！

　　【8、内包含的弹出窗口-一个页面两个窗口】

　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。

　　通过下面的例子，你可以在一个页面内完成上面的效果。

<html>

<head>

<SCRIPT LANGUAGE=javascript>

function openwin()

{

OpenWindow=window.open(, newwin, height=250,

width=250,toolbar=no,scrollbars=+scroll+,menubar=no);

//写成一行

OpenWindow.document.write(<TITLE>例子</TITLE>)

OpenWindow.document.write(<BODY

BGCOLOR=OpenWindow.document.write(<h1>Hello!</h1>)

OpenWindow.document.write(New window opened!)

OpenWindow.document.write(</BODY>)

OpenWindow.document.write(</HTML>)

OpenWindow.document.close()

}

</SCRIPT>

</head>

<body>

<a href=<input type=button onclick=openwin() value=打开窗口>

</body>

</html>

　　看看

OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

　【9、终极应用--弹出的窗口之Cookie控制】

　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(

　　有解决的办法吗？Yes! ;-) Follow me.

　　我们使用cookie来控制一下就可以了。

　　首先，将如下代码加入主页面HTML的<HEAD>区：

<script>

function openwin(){

window.open(page.html,,width=200,height=200)

}

function get_cookie(Name) {

var search = Name + =

var returnvalue = ;

if (documents.cookie.length > 0) {

offset = documents.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = documents.cookie.indexOf(;, offset);

if (end == -1)

end = documents.cookie.length;

returnvalue=(documents.cookie.substring(offset, end))

}

}

return returnvalue;

}

function loadpopup(){

if (get_cookie('popped')==''){

openwin()

documents.cookie=popped=yes

}

}

</script>

　　然后，用<body

onload=loadpopup()>（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

　　写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

　　需要注意的是，JS脚本中的的大小写最好前后保持一致。

　　1.弹启一个全屏窗口

<html>

<body

onload=window.open('http://www.pconline.com.cn','example01','fullscreen');>;

<b>www.e3i5.com</b>

</body>

</html>

　　2.弹启一个被F11化后的窗口

<html>

<body

onload=window.open(''http://www.pconline.com.cn','example02','channelmode');>;

<b>www.e3i5.com</b>

</body>

</html>

　　3.弹启一个带有收藏链接工具栏的窗口

<html>

<body

onload=window.open('http://www.pconline.com.cn','example03','width=400,height=300,directories');>

<b>www.e3i5.com</b>

</body>

</html>

　　4.网页对话框

<html>

<SCRIPT LANGUAGE=javascript>



</SCRIPT>

<b>www.e3i5.com</b>

</body>

</html>

<html>

<SCRIPT LANGUAGE=javascript>



</SCRIPT>

<b> target=_blank>http://www.pconline.com.cn<;/b>

</body>

</html>

　　showModalDialog()或是showModelessDialog()

来调用网页对话框，至于showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口（简称模式窗口），置在父窗口上，必须关闭才能访问父窗口(建议尽量少用，以免招人反感)；showModelessDialog()（简称无模式窗口），打开后不必关闭也可访问父窗口打开的窗口。

dialogHeight: iHeight 设置对话框窗口的高度。

dialogWidth: iWidth 设置对话框窗口的宽度。　　

dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。

dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。

center: {yes | no | 1 | 0 } 指定是否将对话框在桌面上居中，默认值是“yes”。

help: {yes | no | 1 | 0 } 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。　　

resizable: {yes | no | 1 | 0 } 指定是否对话框窗口大小可变。默认值是“no”。

status: {yes | no | 1 | 0 }

指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。

window.close关闭窗口，不弹出系统提示，直接关闭

===================================================

当我们用这种方法:Response.Write("<script>window.close()</script>")

总是提示什么:你查看的网页试图关闭的提示

如何去掉提示，直接关闭窗体?

可以用以下方法:

Response.Write("<script>window.opener=null;window.close()</script>")

只有ie6才支持.

opener只要设为任何值都可以,不会出现提示

如果是通过子窗体关闭父窗体时怎么做呢

子窗体（弹出窗体）：

同理可得：

Response.Write("<script>window.opener.top.opener=null;window.opener.top.close()</script>")

============================================================

最简单的无提示关闭窗口代码(直接复制便可用):

<input type="button" onClick="window.opener = 'xxx';window.close();"

value="IE6最简单的无提示关闭窗口" >

==============================================================

关闭窗口有提示:

<input type="button" onClick="javascript:window.close();" value="关闭">

<a href="javascript:window.close();">关闭</a>

==============================================================

自动关闭窗口代码:

<script language="javascript">



</script>

在网页源代码中加入下面的代码，则该窗口将在20秒钟之后自动关闭！这与跳出式小窗口配合使用是再好不过啦！代码中“i=20”表示关闭的延迟时间为20秒，可任意修改。

==================================================================

无提示操作,自动关闭窗口

<script>setTimeout("window.opener =

'xxx';window.close();;",1000);</script>

==================================================================

怎么隐藏IE的菜单栏,工具栏和地址栏:

<script language="JavaScript">



</script>

<a href="javascript:;"

onClick="MM_openBrWindow('s.html','yy','width=300,height=300')">连接该页的地址</a>

===================================================================

设置本窗口大小且定时自动无提示关闭:

<BODY onload="top.resizeTo(300,300);">

<div align=center>成功插入数据!<br><br>

</div>

<script>setTimeout("window.opener =

'xxx';window.close();;",2000);</script>

</BODY>

====================================================================

点击连接弹出一特定(隐藏IE的菜单栏,工具栏和地址栏)窗口:

<A HREF="s.html"

onClick="javascript:window.open(this.href,'_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,top=0,left=0,width=790,height=545');return

false">新建窗口</a>

=====================================================================

详细介绍设置窗口大小，IE的菜单栏,工具栏和地址栏：

设置窗口大小可以用resizeTo(),resizeBy()函数把这段代码加到你网页源代码的<head></head>之间。

〈script language=javascript〉resizeTo(x,y)〈/script〉或者把其中的resizeBy()

x,y是你想要的窗口的长宽，dx,dy是你想要窗口长宽增加的值。（dx,dy）是负数的时候就缩小了。

隐藏工具栏，菜单栏的话必须打开新窗口才行（下面的代码对IE而言，不同浏览器可能格式有所区别，open后面不要回车换行！）

window.open("url","window_name","menubarbar=no,toolbar=no"></script〉

〈script>

url是你要在新窗口中显示的网页的地址，window_name是窗口的名字，做链接的时候可能用到，不用的话可以用""代替,menubarbar（菜单栏）

toolbar （工具栏）locationbar（地址栏） status（状态栏） personalbar resizabla(是否允许调整大小)

fullsreen（是否全屏）这些参数你可以按照同样的格式使用

代码如果运行出错，就检查一下是否有多余的空格，还有那个“〈”“〉”，有一次我直接粘贴网页上的代码就好出过“〈”“〉”问题。

window.showModalDialog以及window.open用法简介

一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

二、基本语法：

window.open(pageURL,name,parameters)

其中：

pageURL 为子窗口路径

name 为子窗口句柄

parameters 为窗口参数(各参数用逗号分隔)

三、示例：

<SCRIPT>



</SCRIPT>

脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0

象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，

无状态栏。

请对照。

上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。

四、各项参数

其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

参数 | 取值范围 | 说明

| |

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

depended | yes/no | 是否和父窗口同时关闭

directories | yes/no | Nav2和3的目录栏是否可见

height | pixel value | 窗口高度

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

innerHeight | pixel value | 窗口中文档的像素高度

innerWidth | pixel value | 窗口中文档的像素宽度

location | yes/no | 位置栏是否可见

menubar | yes/no | 菜单栏是否可见

outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度

outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度

resizable | yes/no | 窗口大小是否可调整

screenX | pixel value | 窗口距屏幕左边界的像素长度

screenY | pixel value | 窗口距屏幕上边界的像素长度

scrollbars | yes/no | 窗口是否可有滚动栏

titlebar | yes/no | 窗口题目栏是否可见

toolbar | yes/no | 窗口工具栏是否可见

Width | pixel value | 窗口的像素宽度

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

window.showModalDialog使用手册

基本介绍：

showModalDialog() (IE 4+ 支持)

showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。

window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

使用方法：

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

参数说明：

sURL--

必选参数，类型：字符串。用来指定对话框要显示的文档的URL。

vArguments--

可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组

等。对话框通过window.dialogArguments来取得传递进来的参数。

sFeatures--

可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或

几个，用分号“;”隔开。

1.dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默

认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框

时，用px做单位。

2.dialogWidth: 对话框宽度。

3.dialogLeft: 离屏幕左的距离。

4.dialogTop: 离屏幕上的距离。

5.center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。

6.help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。

7.resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。

8.status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[

Modeless]或no[Modal]。

9.scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

下面几个属性是用在HTA中的，在一般的网页中一般不使用。

10.dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。

默认为no。

11.edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。

12.unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

参数传递：

1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符

串类型，最大为4096个字符。也可以传递对象，例如：

-------------------------------

parent.htm

<script>

var obj = new Object();

obj.name="51js";

window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");

</script>

modal.htm

<script>

var obj = window.dialogArguments

alert("您传递的参数为：" + obj.name)

</script>

-------------------------------

2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。

例如：

------------------------------

parent.htm

<script>

str

=window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");

alert(str);

</script>

modal.htm

<script>

window.returnValue="http//blog.csdn.net/marsmao";

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航