JS中window.open()参数详解

IT教程 12个月前 https://www.renrenfan.com.cn
462

window.open 参数

转自:https://www.cnblogs.com/sofiawang/articles/1544631.html

1, 最基本的弹出窗口代码

  window.open('page.html');

2, 经过设置后的弹出窗口

  window.open('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')   //该句写成一行代码

  参数解释:

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为允许;

3, 用函数控制弹出窗口

   下面是一段完整的代码

<html> 

<head> 

<script LANGUAGE="JavaScript"> 

<!-- 

function openwin() { 

window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //写成一行

//--> 

</script> 

</head> 

<body οnlοad="openwin()"> 

任意的页面内容... 

</body> 

</html> 

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

  

  方法一:<body οnlοad="openwin()"> 浏览器读页面时弹出窗口;

  方法二:<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口;

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

<a href="#" οnclick="openwin()"> 打开一个窗口</a>

注意:使用的"#"是虚连接。

  方法四:用一个按扭调用:

  <input type="button" οnclick="openwin()" value="打开窗口" />

4, 弹出两个窗口

   对代码稍微改动如下:

   <script LANGUAGE="JavaScript"> 

<!-- 

function openwin() { 

window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//写成一行 

window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//写成一行 

//--> 

</script>

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

 注意:2个窗口的name(newwindow与 newwindow2)不要相同,或者干脆全部为空。

5, 主窗口打开文件1.htm,同时弹出小窗口page.html

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

   function openwin()

   {

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

   }

   加入body区:

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

6, 弹出的窗口之定时关闭控制

   将一小段代码加入弹出的页面(注意是加入page.html的HTML中,可不是主页面中,否则......),让它在10秒后自动关闭是不是更酷了?

   function closeit()

   {

setTimeout("selft.close()", 10000)   //毫秒

   }

然后,在body 中添加:<body οnlοad="closeit()">即可。

7, 在弹出窗口中加上一个关闭按扭

   <input type="button" value="关闭" οnclick="window.close()">

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=#ffffff>") 

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="#" οnclick="openwin()">打开一个窗口</a> 

<input type="button" οnclick="openwin()" value="打开窗口"> 

</body> 

</html> 

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

9, 终极应用---弹出的窗口这Cookie控制

   回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?

   有解决的办法吗?我们使用cookie来控制即可。

   首先,将如下代码加入主页面的Html的head区:

   function openwin(){ 

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

function get_cookie(Name)

 {

  var search=Name+"=";

  var returnvalue="";

  if(document.cookie.length>0){

   if (offset != -1) { 

   offset += search.length 

   end = document.cookie.indexOf(";", offset); 

   if (end == -1) 

   end = document.cookie.length; 

   returnvalue=unescape(document.cookie.substring(offset, end));

 }

 }

 return returnvalue;

}

function ladpopup()

{

 if(get_cookie('popped=yes'))

{

 openwin()

document.cookie="popped=yes";

}

 }

最后,用<body οnlοad="loadpopup()">

Windows7下chm文件无法打开问题解决方法分享

许多用户在安装使用Win7系统后,发现之前下载的chm格式的文件打不开了,chm是帮助文件类型的电子书,Win7下chm文件打不开主要是因为安

Windows10专业版纯净GHOST系统介绍

微软公司在最近发布了windows10系统,有非常多的都想要使用windows10系统,windows7之家小编就要为网友们介绍Windows10专业版纯净GHO

缺少网络连接需要的Windows套接字注册表项(浏览器无法

缺少网络连接需要的Windows套接字注册表项(浏览器无法连网) CreateTime--2018年4月25日14:17:42 Author:Marydon 1.异常信息此计算

Windows XP系统下载 SP3简体中文版

详细介绍WindowsXP系统概述:Windows XP SP3简体中文版是基于Windows 2000代码的产品,拥有新的用户图形界面,叫做月神Luna,它包括了一

windows7操作系统下载安装教程

电脑已经成为人们在日常生活中必备的一直工具,自从有了电脑我们的生活也因此变得丰富多彩。而支配着电脑运行的要素之一就是操作系

文章回顾

大家看了本文JS中window.open()参数详解的精彩教程资源内容,是不是对JS中window.open()参数详解了解更多,真心希望JS中window.open()参数详解能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明:20d0577eb3893359 发表于 2020-04-20 18:29:34。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

人人翻致力于国内用户最爱翻的资源网站大全

转载请注明:
本文标题:JS中window.open()参数详解
本文地址:https://www.renrenfan.com.cn/s72775.html