Window对象的open()方法

导航和打开窗口

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(
          'https://www.baidu.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(
          'https://www.baidu.com',
          'windowName',
          'height=300, width=400'
        )
      }, 1000)

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

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

<a href="https://www.baidu.com" target="windowname">
      goTargetWindowName
</a>
window.open("http://www.wrox.com/", "windowname");
以上两段代码达到的效果一致的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值