用户登录
用户注册

分享至

Window对象的open()方法

  • 作者: 北方的狼72913907
  • 来源: 51数据库
  • 2021-07-28

导航和打开窗口

Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。

内联框架 iframe
HTML内联框架元素表示嵌套的browsing context(浏览器上下文)。它能够将另一个HTML页面嵌入到当前页面中。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

解释一下:
iframe的name属性可以使window.open() 方法的 windowName 参数值。那么通过window.open()方法指定的资源就会加载到iframe中。

如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

Window.open的参数

window.open(strUrl, strWindowName, [strWindowFeatures]);

  • strUrl === 要在新打开的窗口中加载的URL。
  • strWindowName === 新窗口的名称。
  • strWindowFeatures === 一个可选参数,列出新窗口的特征(大小,位置,滚动条等)作为一个DOMString。

Window.open的返回值

  • WindowObjectReference
    打开的新窗口对象的引用。如果调用失败,返回值会是 null 。如果父子窗口满足“同源策略”,你可以通过这个引用访问新窗口的属性或方法。
      var windowObjectReference // global variable

      function openRequestedPopup() {
        windowObjectReference = window.open(
          'http://www.51sjk.com/Upload/Articles/1/0/264/264506_20210708003753107.com',
          'iframe_name',
          'width=420,height=230,resizable,scrollbars=false,status=1'
        )
      }
      openRequestedPopup()

      // 调用close()方法1s后关闭窗口
      setTimeout(function() {
        windowObjectReference.close()
      }, 1000)

      window.open('/test_open.html', 'windowName', 'height=300, width=400')
      setTimeout(function() {
        window.open(
          'http://www.51sjk.com/Upload/Articles/1/0/264/264506_20210708003753107.com',
          'windowName',
          'height=300, width=400'
        )
      }, 1000)

代码执行效果 将/test_open.html资源加载到windowName新窗口下,然后间隔1s钟后, 又调用了 window.open()方法 把百度的资源加载到原有的windowName窗口内,并不会打开一个新窗口。
MDN: 如果已经存在以 WindowName 为名称的窗口,则不再打开一个新窗口,而是把 strUrl 加载到这个窗口中。

HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、
电子邮件地址或任何其他 URL 的超链接。

<a href="http://www.51sjk.com/Upload/Articles/1/0/264/264506_20210708003753107.com" target="windowname">
      goTargetWindowName
</a>
window.open("http://www.wrox.com/", "windowname");
以上两段代码达到的效果一致的
软件
前端设计
程序设计
Java相关