javascript中window.open()

最新推荐文章于 2023-05-30 14:19:09 发布
最新推荐文章于 2023-05-30 14:19:09 发布
阅读量1.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Daniel_LiXuan/article/details/67633608
版权

一、基本语法

window.open(pageURL,name,parameters) 
其中：
pageURL 为子窗口路径 
name 为子窗口句柄 
parameters 为窗口参数(各参数用逗号分隔) 


二、示例

<script>

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') 

</script>

       脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0px，屏左0px，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏

，无状态栏。


三、其它参数

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

      参数 | 取值范围 | 说明 
      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 | 窗口被激活后是否浮在其它窗口之上

四、代码示例

1) 基本弹窗

<script language="javascript"> 
window.open ('page.html') 
</script> 
     window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。


2) 设置其它参数弹窗

<script>

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') 

</script>


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> 

调用方法一：<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=no, status=no") 
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") 
} 
</script> 

为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。 
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者参数为空。


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

<head>
<script language="javascript"> 
function openwin() 
{window.open("page.html","","width=200,height=200") } 
</script> 

</head>

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

</body>


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

首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript"> 
function closeit() 
{setTimeout("self.close()",10000) //毫秒} 
</script> 
然后，在body中加上onload事件<body οnlοad="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="#" οnclick="openwin()">打开一个窗口</a> 
<input type="button" οnclick="openwin()" value="打开窗口"> 
</body> 
</html> 


9) 弹出的窗口之Cookie控制

<script> 
function openwin() 
{window.open("page.html","","width=200,height=200")} 
function get_cookie(Name) 
{var search = Name + "=" 
var returnvalue = ""; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search) 
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 loadpopup(){ 
if (get_cookie('popped')==''){ 
openwin() 
document.cookie="popped=yes" } 
} 
</script> 

之后在body中加上这段就可以了<body οnlοad="loadpopup()">

Daniel Cen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS window.open()属性
vastskyjoe的专栏
04-25 17万+
一. Window 对象Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 或 每次出现时被自动创建。 二.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 三.window.open(URL,name,features,replace)
JavaScript - 窗口之Open
袭冷
04-01 979
一、窗口创建 function showWindowForOpen(){ var childWin = window.open ( 'open.html', 'newwin', 'height=230,width=500,top=200,left=300,toolbar=no,menubar=no,scrollbars=n
JavaScript 中的 Window.open() 用法详解
热门推荐
孙悟空
05-30 3万+
本文介绍了如何使用Window.open()方法，列举了该方法中各个参数的含义，以及如何在当前窗口、新窗口、独立窗口打开地址
javascript 详解 window.open()方法
qiufengwuxiu的博客
04-03 2938
上网细心的朋友，有可能注意到，打开网站时，一个小窗口浮在当前窗口的左上方。上面写着一些网站公告之类的内容。 javascript window.open()用于打开一个新窗口，用于网站公告，系统升级等提示。window.open()方法包含以下三个属性。window.open("url","窗口的名称"，"参数字符串");url: 打开窗口的网址或路径。窗口的名称："_blank","_top",...
window.open();详解
08-08 440
  一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法：window.open(pageURL,name,parameters) 其中：pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔)  三、示例：
JavaScript中window.open用法实例详解
12-10
本文较为详细的分析了JavaScript中window.open用法。分享给大家供大家参考。具体如下： 代码如下:[removed] window.open (‘page.html’, ‘newwindow’, ‘height=100, width=400, top=0, left=0, toolbar=no, ...
javascript中window.open在原来的窗口中打开新的窗口(不同名)
10-23
本文给大家介绍使用window.open在原来的窗口中打开新的窗口，涉及到win.open新窗口相关知识，对本文感兴趣的朋友参考下
JavaScript中Window.open参数
12-19
JavaScript中Window.open参数详解 1、最基本的弹出窗口代码 2、经过设置后的弹出窗口 3、用函数控制弹出窗口 4、同时弹出2个窗口 5、主窗口打开文件1.htm，同时弹出小窗口page.html ...
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
10-26
主要介绍了javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法即无法再次打开窗口、第二次打开不了,需要的朋友可以参考下
论多窗口相互关联下window.open打开已在的窗口时只激活不刷新的实现方案
Oliver尹的博客
12-25 5971
本文主要实现的场景是，在任意一个窗口内首次打开指定页面时通过新建窗口的方式打开，在任意一个窗口内打开已打开的界面时，仅激活对应窗口，且对应窗口不刷新
JS window.open()方法详解
leijuly'blog
03-12 2万+
Window.Open详解Window.Open详解一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法：window.open(pageURL,name,parameters) 其中：pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 
JavaScript-打开新窗口（window.open）
热爱我的热爱
08-21 4662
语法： window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。 窗口名称：可选参数，被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_self"具有特殊意义的名称。
JavaScript中使用window.open被拦截解决办法
大熊猫的专栏
08-31 2万+
最近做项目，有个需求是，点击签到，签到成功后，弹出悬浮窗，待其消失后跳转到新窗口。签到功能通过ajax异步请求完成，最开始的想法是在异步获得返回成功后，直接用window.open(URL)打开目的窗口，遇到了新标签页被浏览器拦截的情况；$.ajax({ type: 'get', dataType: 'jsonp',
JavaScript打开窗口函数（Window.Open）使用详解
TIANKONGSUIYU的专栏
02-26 1898
JavaScript打开窗口函数（Window.Open）使用详解 一、Location对象的使用简介 location对象： location提供了关于当前打开窗口或者特定框架的url信息。一个多框架的窗口对象在location属性显示的是父窗口的URL，每个框架也有一个与之相伴的location对象。 hash属性：hash标注是一个url很好的习惯用法，它指定浏览器到一个位于
JavaScript的window.open方法
C.
11-10 1429
a1.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>a.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equ
JavaScript中的window.open()打开一个新的网页
一份耕耘 一份收货
01-09 5249
今天遇到一个问题，就是要用JavaScript中的window.open()打开一个新的网页，而且新打开的网页要在原来网页的基础之上，在查了一些资料之后，找到里一下方法：（其中，url 为链接的地址）       1、如果要打开一个新的窗口，就加上参数 _blank,如下所示：                           2、如果你想弹出的窗口代替本身的话,将参数换
window.open()详解
farxix的博客
05-06 5987
语法 window.open(URL,name,specs,replace) var specs="height=400,width=600,alwaysRaised,directories=no,toolbar=no,titlebar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no"; 返回值： oNewWind...
javascript:Window.Open详解
不积小流无以成江海，不积跬步无以至千里
06-12 818
Window.Open详解 一、window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法： window.open(pageURL,name,parameters) 其中： pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔)
在html中window.open
最新发布
04-02
在HTML中，`window.open()`是一个JavaScript方法，用于在浏览器中打开一个新的窗口或标签页。它可以接受三个参数：URL、窗口名称和窗口特性。 1. URL：表示要在新窗口中打开的网页的URL。可以是相对路径或绝对路径...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值