baozhengrui

导航

window.open 基本用法

简介

window.open（）支持环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3以上版本+/Opera3+Fireforx

基本语法：window.open(pageURL,name,parameters)

其中：

  • pageURL 为子窗口路径
  • name 为子窗口句柄
  • parameters 为窗口参数（各参数用逗号分隔）
  • window.open(url,name,features,replace)
  • Arguments - 参数

url

可选字符串参数，指向要在新窗口中显示的文档的URL。如果省略该参数，或者参数为空字符串，新窗口不会显示文档。

name

可选字符串参数，该参数可以设置新窗口的名称。
相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。
name 不能包含有空格。

features

可选字符串参数，该参数用于设定新窗口的功能。因为该参数是可选的，如果没有指定该参数，新窗口有所有的标准功能。

replace

可选布尔参数，设置新窗口中的操作历史的保存方式。

  • true - 创建新历史记录
  • false - 替换旧的历史记录

返回值

一个根据name参数对新创建的或已存在的窗口对象的引用。

描述

  • open（）方法可以查找一个已经存在的或者新建的浏览器窗口。如果name参数指定了一个已经存在的浏览器窗口，则返回对该窗口的引用。返回的窗口中将显示URL中指定的文档，但是features参数会被忽略。open（）方法是JavaScript中唯一通过名称获得浏览器窗口引用的途径。
  • 如果没有指定name参数，或者不存在name参数指定的名称的窗口，open（）方法将创建一个新的浏览器窗口。
  • name参数用于指定新窗口的名称， 该名称必须由字母、数字和下划线字符组成。它可以被HTML文档中的标记或；标记指向。
  • 当你使用window.open（）方法加载一个新的文档到一个已经存在了命名的窗口中时，你可以通过replace参数设置历史记录的保存方式.。如果该参数是true，新文档的历史记录将取代旧文档的历史记录。如果该参数为false或这没有指定该参数， 新的文件在窗口的浏览历史记录中将建立自己的条目。该参数提供了location.replace（）相同功能的方式。
  • 不要把"Window.open() "和"Document.open()"混淆；这是两个完全不一样的方法。为了让代码更明晰， 你可以用"Window.open()"代替 "open()"。作为HTML属性定义事件处理程序时， "open()" 一般被解释为"Document.open()"，所以在这种情况下， 你必须使用"Window.open()"。

窗口特性

  • feature参数是一个用逗号分隔的功能列表。如果该参数为空或者没有指定该参数，新的窗口将拥有所有的功能。另一方面，如果feature参数只指定了某一项或某几项功能，那么其他没有被指定的功能将不会出现在新的窗口中。该字符串不能包含任何空格或其它空字符串。
    列表中的每个元素的格式：功能[=值]
    对于绝大多数的功能来说，它们的值一般都是yes或no。对这些功能，等号和值都可以省略不写。对于 width和height特性， 必须给它们指定一个以像素为单位的值。
    以下是一些普遍支持的功能和它们的含义：
    alwaysLowered
    Internet Explorer：不支持
    Navigator：版本 4+
    指定窗口总是保留在堆栈的最下面。换言之，不管新窗口是否激活，总是其他窗口下。
    window.open("alwayslowered.html","_blank","alwaysLowered");
    alwaysRaised 　Internet Explorer：不支持
    Navigator：版本 4+
    指定窗口总是保留在堆栈的最上面。换言之，不管新窗口是否激活，总是其他窗口上。
    window.open("alwaysraised.html","_blank","alwaysRaised");
    channelmode
    Internet Explorer：版本 4+
    Navigator：不支持
    指定是否按照剧场模式显示窗口，以及是否显示频道区。
    window.open("channelmode.html","_blank","channelmode");
    dependent
    Internet Explorer：不支持
    Navigator：版本 4+
    定义是否窗口成为当前打开窗口的依赖子窗口。依赖窗口就是当它的父窗口关闭时，它也随即关闭。在windows平台上，一个依赖窗口不会在任务栏上显示。
    window.open("dependent.html","_blank","dependent");
    directories
    Internet Explorer：所有版本
    Navigator：所有版本
    指定是否显示目录按钮（比如众所周知的"What's Cool" and "What's New" 按钮）。Internet Explorer将这些目录按钮引用为链接工具栏，Navigator（版本4和以上）称之为个人工具栏。
    window.open("directories.html","_blank","directories");
    fullscreen
    Internet Explorer：版本 4+
    Navigator：不支持
    定义是否按照全屏方式打开浏览器。请小心使用全屏模式，因为在这种模式下，浏览器的标题栏和菜单都被隐藏，所有你应该提供一个按钮或者其他可视的线索来帮助用户关闭这个窗口。当然，使用热键ALT+F4也能关闭窗口。
    window.open("fullscreen.html","_blank","fullscreen");
    height
    Internet Explorer：所有版本
    Navigator：所有版本
    以象素pixel为单位定义窗口文档显示区域的高度，最小数值是100。如果仅仅定义高度，Internet Explorer使用给定的高度和默认的宽度。对于Navigator，如果不同时指定width或者innerWidth，那么就将忽略这个属性。
    window.open("height.html","_blank","height=200,width=300");
    hotkeys
    Internet Explorer：不支持
    Navigator：版本 4+
    如果没有定义（或者为0），那么就屏蔽了没有菜单条的新窗口的大部分热键。但是安全以及退出热键仍然保留。
    window.open("hotkeys.html","_blank","hotkeys=0,menubar=0");
    innerHeight
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素pixel为单位定义窗口文档显示区域的高度，最小数值是100。在Navigator版本4中，这个特征替换height，为得是保持向后兼容。对于Navigator，如果不同时指定width或者innerWidth，那么就将忽略这个属性。
    window.open("innerheight.html","_blank","innerHeight=200,innerWidth=300");
    innerWidth
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素pixel为单位定义窗口文档显示区域的宽度，最小数值是100。在Navigator版本4中，这个特征替换width，为得是保持向后兼容。对于Navigator，如果不同时指定height或者innerHeight，那么就将忽略这个属性。
    window.open("innerwidth.html","_blank","innerHeight=200,innerWidth=300");
    left
    Internet Explorer：版本 4+
    Navigator：不支持
    以象素为单位定义窗口的X左标。
    window.open("left.html","_blank","left=20");
    location
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否显示浏览器中供地址URL输入的文本域。
    window.open("location.html","_blank","location");
    menubar
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否显示菜单条（菜单条位于窗口顶部，包括“文件”和“编辑”等）。
    window.open("menubar.html","_blank","menubar");
    outerHeight
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素为单位定义窗口（它的外部边界）的总高度，最小数值比100多一些，因为窗口内容区域的高度必须至少是100。如果没有同时定义outerWidth，Navigator将忽视这个特征。
    window.open("outerheight.html","_blank","outerHeight=200,outerWidth=300");
    outerWidth
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素为单位定义窗口（它的外部边界）的总宽度，最小数值比100多一些，因为窗口内容区域的宽度必须至少是100。如果没有同时定义outerHeight，Navigator将忽视这个特征。
    window.open("outerwidth.html","_blank","outerHeight=200,outerWidth=300");
    resizable
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否窗口可以通过它的边界进行大小缩放控制。依赖于平台不同，用户也许还有其他改变窗口大小的方法。
    window.open("resizable.html","_blank","resizable");
    screenX
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素为单位定义窗口的X坐标。
    window.open("screenx.html","_blank","screenX=20");
    screenY
    Internet Explorer：不支持
    Navigator：版本 4+
    以象素为单位定义窗口的Y坐标。
    window.open("screeny.html","_blank","screenY=20");
    scrollbars
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否激活水平和垂直滚动条。
    window.open("scrollbars.html","_blank","scrollbars");
    status
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否在窗口的下部添加状态栏。
    window.open("status.html","_blank","status");
    titlebar
    Internet Explorer：Version 5+
    Navigator：版本 4+
    定义是否显示窗口的标题栏。在Internet Explorer中，除非调用者是一个HTML应用程序或者一个可信任的对话框，那么这个特征是被屏蔽的。
    window.open("titlebar.html","_blank","titlebar=0");
    toolbar
    Internet Explorer：所有版本
    Navigator：所有版本
    定义是否显示浏览器的工具栏（位于窗口的上部，包括“后退”和“向前”）。
    window.open("toolbar.html","_blank","toolbar");
    top
    Internet Explorer：版本 4+
    Navigator：不支持
    以象素为单位定义窗口的纵坐标。
    window.open("top.html","_blank","top=20");
    width
    Internet Explorer：所有版本
    Navigator：所有版本
    以象素pixel为单位定义窗口文档显示区域的宽度，最小数值是100。如果仅仅定义宽度，Internet Explorer使用给定的宽度和默认的高度。对于Navigator，如果不同时指定height或者innerHeight，那么就将忽略这个属性。
    window.open("width.html","_blank","height=200,width=300");
    z-lock
    Internet Explorer：不支持
    Navigator：版本 4+
    定义窗口激活时不在堆栈中浮起，就是说，新窗口当被激活时并不能位于其他窗口之上。
    window.open("zlock.html","_blank","z-lock");
    示例
    编辑
    播报
    1、最基本的弹出窗口代码
    其实代码非常简单：
    <。--
    window.open ('page.html')
    -->
    因为这是一段javascripts代码，所以它们应该放在；标签和；之间。；是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
    Window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径（http://）和相对路径（../）均可。用单引号和双引号都可以，只是不要混用。
    这一段代码可以加入HTML的任意位置，；和；之间可以，；间；也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。
    【2、经过设置后的弹出窗口】
    下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。
    我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。
    参数解释：
    js脚本开始；
    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为允许；
    js脚本结束
    【3、用函数控制弹出窗口】
    下面是一个完整的代码。
    …任意的页面内容…
    这里定义了一个函数openwin（），函数内容就是打开一个窗口。在调用它之前没有任何用途。
    怎么调用呢？
    方法一： 浏览器读页面时弹出窗口；
    方法二： 浏览器离开页面时弹出窗口；
    方法三：用一个连接调用：
    ；打开一个窗口
    注意：使用的"#"是虚连接。
    方法四：用一个按钮调用：
    【4、同时弹出2个窗口】
    对源代码稍微改动一下：
    为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
    注意：2个窗口的name(newwindows和newwindow2）不要相同，或者干脆全部为空。OK？
    【5、主窗口打开文件1.htm，同时弹出小窗口page.html】
    如下代码加入主窗口；区：
    加入；区：
    open；即可。
    【6、弹出的窗口之定时关闭控制】
    下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面（注意是加入到page.html的HTML中，可不是主页面中，否则…），让它10秒后自动关闭是不是更酷了？
    首先，将如下代码加入page.html文件的；区：
    function closeit()
    {setTimeout("self.close()",10000) //毫秒}
    然后，再用 这一句话代替page.html中原有的；这一句就可以了。（这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。）
    【7、在弹出窗口中加上一个关闭按钮】
    呵呵，现在更加完美了！
    【8、内包含的弹出窗口-一个页面两个窗口】
    上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
    通过下面的例子，你可以在一个页面内完成上面的效果。
    function openwin()
    {OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
    //写成一行
    OpenWindow.document.write("；例子")
    OpenWindow.document.write("")
    OpenWindow.document.write("Hello。")
    OpenWindow.document.write("New window opened!")
    OpenWindow.document.write("")
    OpenWindow.document.write("")
    OpenWindow.document.close()}
    ；打开一个窗口
    看看 OpenWindow.document.write（）里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close（）结束啊。
    【9、终极应用--弹出的窗口之Cookie控制】
    回想一下，上面的弹出窗口虽然酷，但是有一点小毛病（沉浸在喜悦之中，一定没有发现吧？）比如你将上面的脚本放在一个需要频繁经过的页面里（例如首页），那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？：-（有解决的办法吗？Yes! 😉 Follow me.
    我们使用cookie来控制一下就可以了。
    首先，将如下代码加入主页面HTML的；区：
    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"
    }
    }
    然后，用；（注意不是openwin而是loadpop啊！）替换主页面中原有的；这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！
    写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
    需要注意的是，JS脚本中的的大小写最好前后保持一致。

posted on 2022-05-06 14:33  芮艺  阅读(1223)  评论(0)  编辑  收藏  举报