900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > JS打开新窗口(window.open() href)

JS打开新窗口(window.open() href)

时间:2024-01-24 21:40:38

相关推荐

JS打开新窗口(window.open()  href)

JS打开新窗口

常用于文件、图片预览,或者加载一个新页面。

window.open() - 打开新窗口

用法:

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

strUrl: 新窗口需要载入的url地址,项目中我们打开的是一个在线文档。strWindowName:新窗口的名字,通过这个名字我们可以获得新窗口的引用,容易重复,如果我们希望每次打开新窗口都是一个全新的窗口,可以设置成关键字 “_blank”。strWindowFeatures:新窗口的一些设置,比如是否显示菜单栏,是否可以滚动和缩放窗口大小等。

示例:

window.open("", "_blank", "resizable,scrollbars,status");

window.location - 更新当前窗口

加载给定URL的内容资源到这个Location对象所关联的对象上。

属性:

window.location.href = strUrl; //

方法:

window.location.assign(strUrl);window.location.replace(strUrl); // 不会保存到浏览器会话的历史 History

a 标签 href 属性

<a href="strUrl" target="_blank">点击打开新窗口预览</a>

动态 a 标签

<div onclick="openNewWindow()">点击打开新窗口预览</div>

function openNewWindow() {const strUrl = "";let a = document.createElement("a");document.body.appendChild(a);a.style = "display: none";a.target = "_blank";a.href = strUrl;a.click();document.body.removeChild(a);}

iOS window.open 无效

可以采用window.locationa标签 的方式解决。

或者调整脚本时序,先创建一个空窗口,再加载内容,而不是window.open(strUrl)同时完成。

var windowReference = window.open();myService.getUrl().then(function(url) {windowReference.location = url;});

安全问题

打开新窗口,可以通过window.opener获取原窗口的引用,利用这个引用,可以修改原窗口的属性,比如 url,所以解决安全问题就需要把这个引用切断。

window.open的方式,如下处理

const newWindow = window.open("");newWindow.opener = null;

a标签 的方式需要添加rel属性:

<a href="strUrl" target="_blank" rel="noopener noreferrer">点击打开新窗口预览</a>

性能问题

除了安全隐患外,还有可能造成性能问题。通过target="_blank"打开的新窗口,跟原来的页面窗口共用一个进程。如果这个新页面执行了一大堆性能不好的 JavaScript 代码,占用了大量系统资源,那你原来的页面也会受到池鱼之殃。

.END

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。