JS 打开新窗口

使用JavaScript window对象(属于BOM)打开新窗口:
语法:
window.open(URL,name,features);
该方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

参数说明:

URL :一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。


name :一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记<a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么open()方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略


features  :一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在<窗口特征>这个表格中,我们对该字符串的格式进行了详细的说明。


窗口特征(常用):

属性名称说 明
height、width窗口文档显示区的高度、宽度。以像素计。
left、top窗口的x坐标、y坐标。以像素计
toolbar=yes | no | 1 | 0是否显示浏览器的工具栏。黙认是yes。
scrollbars=yes | no | 1| 0是否显示滚动条。黙认是yes。
location=yes | no | 1 | 0是否显示地址地段。黙认是yes。
status=yes | no | 1 | 0是否添加状态栏。黙认是yes。
menubar=yes | no | 1 | 0是否显示菜单栏。黙认是yes。
resizable=yes | no | 1 | 0窗口是否可调节尺寸。黙认是yes。
titlebar=yes | no | 1 | 0是否显示标题栏。黙认是yes。
fullscreen=yes | no | 1 | 0是否使用全屏模式显示浏览器。黙认是no。

注:不同的游览器对窗口特征属性支持也不相


使用案例:
1、打开新的窗口,窗口特性使用默认值

<body>
<script type="text/javascript">
    function openAnother() {
        window.open("http://www.baidu.com"); //打开新窗口,窗口特性全部使用默认值。
    }
</script>
<button οnclick="openAnother()">打开新窗口</button>
</body>

2、打开新的窗口,设置窗口特性

<body>
    <button οnclick="openAnother();">打开新窗口</button>
    <script type="text/javascript">
      var win;
      function openAnother () {
          win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");//有些特性在个别浏览器上已被进制修改。
      }
    </script>
</body>

3、关闭新打开的窗口

open方法返回打开的那个窗口的window对象,可以调用close方法关闭新打开的窗口。

<body>
<button οnclick="openAnother();">打开新窗口</button>
<button οnclick="closeAnother();">关闭新打开的窗口</button>
<script type="text/javascript">
    var win;
    function openAnother () {
        win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");
    }
    function closeAnother() {
        win.close();//关闭指定窗口
    }
</script>
</body>

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值