window.open()打开新窗口教程

摘要:
使用窗口对象的open()方法打开新窗口。新创建的窗口对象具有一个open属性,该属性引用了打开它的原始对象。Opener仅在弹出窗口的最外层窗口对象中定义,并指向调用该窗口的窗口或框架。open()方法。oid=S-P1586654454RN545',680450);“˃[Details]效果如下:参考文档:使用window对象的open()方法打开新窗口日期:2020.1.22lzb

使用 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="http://t.zoukankan.com/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()打开新窗口教程第1张

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

日期:2020.1.22     lzb

 

免责声明:文章转载自《window.open()打开新窗口教程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇虚拟化网络之OpenvSwitchMySQL 中间件汇总比较下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Django2.0 URL配置详解

转自:https://www.cnblogs.com/feixuelove1009/p/8399338.html Django2.0发布后,很多人都拥抱变化,加入了2的行列。 但是和1.11相比,2.0在url的使用方面发生了很大的变化,下面介绍一下:   一、实例 先看一个例子: from django.urls import path from ....

[爬虫]采用Go语言爬取天猫商品页面

最近工作中有一个需求,需要爬取天猫商品的信息,整个需求的过程如下: 修改后端广告交易平台的代码,从阿里上传的素材中解析url,该url格式如下: https://handycam.alicdn.com/slideshow/26/7ef5aed1e3c39843e8feac816a436ecf.mp4?content=%7B%22items%22%3A%5B...

CefSharp 浏览器核心,爬虫

CefSharp是什么 A framework for embedding web-browsing-like capabilities to a standard .NET application (WPF or Windows Forms). A set of high-level custom controls to make it reasona...

Django【第2篇】:Django之反向解析

Django框架之第二篇 一、知识点回顾 1、MTV模型   model:模型,和数据库相关的   template:模板,存放html文件,模板语法(目的是将变量如何巧妙的嵌入到HTML页面中)。   views:视图函数 另加urls:url路径与视图函数的映射关系,,可以不是一一对应的。 2、相关的一些命令   创建一个Django项目:dja...

Django中CSS加载background url('')问题

Django中CSS加载background url('')问题 在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django当成URL来解析 这样会造成找不到该文件的问题。 所以为了解决这个问题,首先需要配置setting.py, 配置STATICFILES_DIRS STATIC...

element ui的照片墙 默认显示照片

参考地址: element ui的照片墙 默认显示照片 照片显示的数据格式是:[{name: '', url: ''}],:file-list=""默认显示的图片 实际项目开发中需要处理两个问题:① 从后端返回的二进制数据处理为前端image可识别的base64格式; ② 如果从后端返回的数据不为空,那么显示图片,并且隐藏上传按钮,只有当删除展示的图片后才...