window.open 打开模态窗口,并修改标题title。

方法一:onload

// 打开模态窗口

// 打开模态窗口
  openWindow1(url, title, w, h) {
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const left = ((width / 2) - (w / 2)) + dualScreenLeft;
    const top = ((height / 2) - (h / 2)) + dualScreenTop;
    const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    newWindow.onload = function () {
      // 定时器根据实际情况取舍。
      setTimeout(function () {
        newWindow.document.title = title;
      }, 100)
    }

    if (window.focus) {
      newWindow.focus();
    }
  }

方法二 :iframe

// 打开模态窗口

// 打开模态窗口
  openWindow(url, title, w, h) {
    const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
    const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const left = ((width / 2) - (w / 2)) + dualScreenLeft;
    const top = ((height / 2) - (h / 2)) + dualScreenTop;
    const newWindow = window.open('about:blank', title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
    newWindow.document.title = title;

    let iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '100vh';
    iframe.style.margin = '0';
    iframe.style.padding = '0';
    iframe.style.overflow = 'hidden';
    iframe.style.border = 'none';

    newWindow.document.body.style.margin = '0';
    newWindow.document.body.appendChild(iframe);

    if (window.focus) {
      newWindow.focus();
    }
  }

推荐 第二种

第一种嵌套少一层,但是加载的html时候会优先加载自己的title,导致标题会变动一次,显示效果差一些。
第二种就不会有这种问题,但是多嵌套了一层。
大家可根据自己的需求使用。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中,可以使用window.location.href来在当前窗口打开一个新的URL,比如可以使用window.location.href = 'https://www.cnblogs.com/guorongtao/'来在当前窗口打开博客园的个人博客页面。这与在JavaScript中使用window.location.href的方式类似。在HTML中,可以使用<a href="https://www.cnblogs.com/guorongtao/">Welcome Test1</a>来创建一个链接,点击链接时会在新窗口打开指定的URL。另外,如果你想在Vue中打开一个新的窗口,并指定窗口的大小、位置等参数,可以使用window.open来实现,例如:window.open('www.baidu.com','newindow','height=600,width=900,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')。另外,如果你想在Vue中打开一个对话框(Modal Dialog),可以使用window.showModalDialog来实现,例如:window.showModalDialog('https://www.cnblogs.com/guorongtao','','DialogLeft:170px;DialogTop:130px;DialogWidth:930px;DialogHeight:753px;status:no;help:no')。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Window 打开窗口的几种方式 window.location.href、window.openwindow.showModalDialog](https://blog.csdn.net/qianluo111/article/details/125280622)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值