window的OPen方法，弹窗的特征

最新推荐文章于 2025-05-06 21:59:56 发布

船_.

最新推荐文章于 2025-05-06 21:59:56 发布

阅读量3k

点赞数 28

本文链接：https://blog.youkuaiyun.com/weixin_69026046/article/details/135388104

版权

window.open() 是 JavaScript 中的一个方法，用于在浏览器中打开新窗口或标签页。它允许你以编程方式控制新窗口的大小、位置、URL、工具栏、菜单栏等属性。下面是 window.open() 方法的详细解释：

window.open(URL, name, specs, replace);

URL：要在新窗口中加载的文档的 URL。这是一个必需的参数。
name：新窗口的名称，用于标识新窗口。如果指定相同的名称，它将在同一个窗口中打开。如果留空或设置为"_blank"，将在新窗口或标签页中打开。这是可选参数。
specs：一个包含各种窗口特性的字符串，如大小、位置、工具栏、菜单栏等。这是可选参数。
replace：一个布尔值，指示是否替换浏览器历史中的当前文档。如果设置为 true，则新文档将替换当前文档，浏览器历史中将没有后退按钮。这是可选参数。

specs 参数 specs 参数是一个以逗号分隔的字符串，其中包含窗口的各种特性。以下是一些常见的 specs 参数选项：

width：	窗口的宽度（以像素为单位）
height：	窗口的高度（以像素为单位）
top：	窗口的顶部位置（以像素为单位）
left：	窗口的左侧位置（以像素为单位）
resizable：	指定窗口是否可以调整大小（“yes” 或 “no”）
scrollbars：	指定窗口是否显示滚动条（“yes” 或 “no”）
toolbar：	指定窗口是否显示工具栏（“yes” 或 “no”）
menubar：	指定窗口是否显示菜单栏（“yes” 或 “no”）
location：	指定窗口是否显示地址栏（“yes” 或 “no”）
status：	指定窗口是否显示状态栏（“yes” 或 “no”）

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>

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" onclick="openwin()">open</a>即可。

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

将一小段代码加入弹出的页面（注意是加入page.html的HTML中，可不是主页面中，否则......），让它在10秒后自动关闭是不是更酷了？
function closeit()
{
setTimeout("selft.close()", 10000)   //毫秒
}
然后，在body 中添加：<body onload="closeit()">即可。

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

<input type="button" value="关闭" onclick="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="#" onclick="openwin()">打开一个窗口</a> 
　　<input type="button" onclick="openwin()" value="打开窗口"> 
　　</body> 
　　</html>

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

 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 onload="loadpopup()">