使用 window 对象的 open() 方法可以打开一个新窗口。用法如下：

window.open (URL, name, features, replace)

参数列表如下：

  • URL：可选字符串，声明在新窗口中显示网页文档的 URL。如果省略，或者为空，则新窗口就不会显示任何文档。
  • name：可选字符串，声明新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的 target 目标值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features 参数将被忽略。
  • features：可选字符串，声明了新窗口要显示的标准浏览器的特征，具体说明如下表所示。如果省略该参数，新窗口将具有所有标准特征。
  • replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。

该方法返回值为新创建的 window 对象，使用它可以引用新创建的窗口。

新窗口显示特征
特征 说明
fullscreen = yes | no | 1 | 0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口同时处于剧院模式
height = pixels 窗口文档显示区的高度。单位为像素。
left = pixels 窗口的 x 坐标。单位为像素。
location = yes | no | 1 | 0 是否显示地址字段。默认是 yes。
menubar = yes | no | 1 | 0 是否显示菜单栏。默认是 yes。
resizable = yes | no | 1 | 0 窗口是否可调节尺寸。默认是 yes。
scrollbars = yes | no | 1 | 0 是否显示滚动条。默认是 yes。
status = yes | no | 1 | 0 是否添加状态栏。默认是 yes。
toolbar = yes | no | 1 | 0 是否显示浏览器的工具栏。默认是 yes。
top = pixels 窗口的 y 坐标
width = pixels 窗口的文档显示区的宽度。单位为元素。

新创建的 window 对象拥有一个 opener 属性，引用打开它的原始对象。opener 只在弹出窗口的最外层 window 对象（top）中定义，而且指向调用 window.open() 方法的窗口或框架。

示例1

下面示例演示了打开的窗口与原窗口之间的关系。

win = window.open();  //打开新的空白窗口

win.document.write ("<h1>这是新打开的窗口</h1>");  //在新窗口中输出提示信息

win.focus ();  //让原窗口获取焦点

win.opener.document.write ("<h1>这是原来窗口</h1>");  //在原窗口中输出提示信息

console.log(win.opener == window);  //检测window.opener属性值

使用 window 的 close() 方法可以关闭一个窗口。例如，关闭一个新创建的 win 窗口可以使用下面的方法实现。

win.close;

如果在打开窗口内部关闭自身窗口，则应该使用下面的方法。

window.close;

示例2

下面示例演示如何自动弹出一个窗口，然后设置半秒钟之后自动关闭该窗口，同时允许用户单击页面超链接，更换弹出窗口内显示的网页 URL。

var url = "c.biancheng.net";  //要打开的网页地址

var features = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,

    scrollbars=no,resizable=no, location=no, status=no";  //设置新窗口的特性

//动态生成一个超链接

document.write('<a href="c.biancheng.net" target="newW">切换到C语言中文网首页</a>');

var me = window.open(url, "newW", featrues);  //打开新窗口

setTimeout (function () {  //定时器

    if (me.closed) {

        console.log("创建的窗口已经关闭。");

    } else {

        me.close();

    }

}, 5000);  //半秒钟之后关闭该窗口

示例3

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>打开新窗口</title>

    <script type="text/javascript" >

    function OpenMyWinN(surl,w,h){

    window.open(surl, "popUpMyWinN", "scrollbars=yes,resizable=yes,statebar=no,width="+w+",height="+h+",left=200, top=100");

}

    </script>

</head>

<body>

<table width="98%" border="0" cellpadding="1" cellspacing="1" align="center" class="tbtitle" style="background:#cfcfcf;">

  <tr>

    <td height="28" colspan="11" bgcolor="#EDF9D5" background='images/tbg.gif'>

        <table width="98%" border="0" cellspacing="0" cellpadding="0">

        <tr>

          <td width="30%"  style="padding-left:10px;"><strong>订单列表：</strong> </td>

          <td width="45%" align="right" style="padding-top:4px">

              <input type="button" name="ss13" value="未付款" sonClick="javascript:OpenMyWinN('#',680,450);"  class='np coolbg'/>

          </td>

        </tr>

      </table>

      </td>

    </tr>

</table>

<a href="javascript:OpenMyWinN('shops_operations_cart.php?oid=S-P1586654454RN545',680,450);" >[详情]</a>

效果如下图：

参考文档：使用 window 对象的 open() 方法可以打开一个新窗口

日期：2020.1.22     lzb

window.open()打开新窗口教程的更多相关文章

  1. ajax请求响应中用window.open打开新窗口会被浏览器拦截的解决方式

    一.问题描述 ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是会被浏览器给拦截了,需要用户点下. 二.问题分析 浏览器之所以拦截新开窗口是因为该操作并 ...

  2. 几个主流浏览器 Window.open打开新窗口 、模拟a标签打开新窗口的 表现

    Window.open打开新窗口 1.常用浏览器打开新窗口(正常打开window.open)的的不同表现形式(PC/移动端) 2.Window.open在异步处理中打开(_blank) a标签在异步处 ...

  3. window.open打开新窗口被浏览器拦截的处理方法

    一般我们在打开页面的时候, 最常用的就是用<a>标签,如果是新窗口打开就价格target="_blank"属性就可以了, 如果只是刷新当前页面就用window.loca ...

  4. window.open打开新窗口 参数

    1,基本描述 oNewWindow = window.open( sURL , sName , sFeatures, bReplace) window.open在打开一个窗口(其url为sURL)后, ...

  5. 使用window.open打开新窗口被浏览器拦截的解决方案

    问题描述: 代码中直接使用window.open('//www.baidu.com', '_blank');会被浏览器窗口拦截 原因浏览器为了维护用户安全和体验,在JS中直接使用window.open ...

  6. js 模拟window.open 打开新窗口

    为什么要去模拟window.open() 打开一个 新的窗口呢,因为有些浏览器默认会拦截 window.open, 当需要函数中打开新窗口时,接可以使用a标签去模拟打开. /** * a模拟windo ...

  7. window.open 打开新窗口被拦截的解决方案

    最近公司开发的一个项目,平凡用到下载各种类型的文件,但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开,影响用户体验,尝试各种方案和百度总结一下几点: 原理: 当window. ...

  8. window.open()打开新窗口 及参数

    在jsp页面中需要使用到弹出窗口,想到js的window对象有一个open方法可以弹出窗口,于是对open方法进行记录. 首先是open方法的语法及定义: 定义: open() 方法用于打开一个新的浏 ...

  9. window.open()打开新窗口被拦截

    window.open( url )是常用的打开新页面的方法,一般都没有问题,但是如果在ajax回调方法里面使用就会被浏览器拦截,因为在浏览器安全机制中,页面弹窗必须是由用户触发的才是安全弹窗,比如说 ...

随机推荐

  1. kepler.gl 2.4.0重要更新

    1 简介 kepler.gl作为开源地理空间数据可视化神器,也一直处于活跃的迭代开发状态下.而在前不久,kepler.gl正式发布了其2.4.0版本,下面我们就来对其重要的新特性进行介绍: 图1 2 ...

  2. Mysql联合索引的最左前缀原则以及b+tree

    软件版本mysql5.7 根据官网的文档 https://dev.mysql.com/doc/refman/5.7/en/multiple-column-indexes.html 查询条件要符合最左原 ...

  3. Java 细粒度锁续篇

    在上篇文章中大概介绍了 Java 中细粒度锁的几种实现方式,并且针对每种方式都做了优缺点说明,在使用的时候就需要根据业务需求选择更合适的一种.上篇文章中的最后一种弱引用锁的实现方式,我在里面也说了其实 ...

  4. PHP代码样例

    1 <?php 2 3 /** 4 * 时间:2015-8-6 5 * 作者:River 6 * 超级有用.必须收藏的PHP代码样例 7 */ 8 class Helper { 9 10 /** ...

  5. 1.docker介绍、命令、容器、镜像、数据卷、Dockerfile、常用软件安装、推送阿里云

    一.docker介绍 1.docker是什么 一款产品从开发到上线,从操作系统,到运行环境,再到应用配置.作为开发+运维之间的协作我们需要关心很多东西,这也是很多互联网公司都不得不面对的问题,特别是各 ...

  6. ajax上传单个文件

    jsp页面 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML> ...

  7. pandas取前K大的数，sort_values()和nlargest()速度比较

    排序量比较大时: 数据量比较小时: 所以结论就是: 数据量大时选用nlargest,数据量小时选用sort_values() 具体数据量怎么算大:10000条时两个方法的时间差不多,所以可以按1000 ...

  8. Linux嵌入式学习-Mplayer交叉编译-undefined reference to `clock_gettime' MPlayer

    編譯Mplayera. 配置.configure# ./configure --host-cc=gcc --cc=arm-linux-gcc --target=arm --enable-static ...

  9. stm32学习笔记之SysTick的思考

    原文来自--SevenZ的笔记.http://blog.21ic.com/user1/8247/archives/2011/85920.html ? 首先我们要明白什么是SysTick定时器? Sys ...

  10. 图解SparkStreaming与Kafka的整合，这些细节大家要注意！

    前言 老刘是一名即将找工作的研二学生,写博客一方面是复习总结大数据开发的知识点,一方面是希望帮助更多自学的小伙伴.由于老刘是自学大数据开发,肯定会存在一些不足,还希望大家能够批评指正,让我们一起进步! ...