js 打开新窗口方式

Jensen 发布于2019-08-01 17:54 / 1300人阅读

摘要：之前的项目，有个功能是下载文件，这里只要在浏览器输入就会下载那个文件了。

之前的项目，有个功能是下载文件，这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ，但是却会被浏览器进行拦截，要手动开启才行，然后就搜索研究其他方法，就看到各种各样的，通过 js 打开新窗口的方法了，这里就总结一下

解决下载功能

这里就先说解决下载功能的方法，通过同事的提醒，改用 iframe 进行处理，直接对 iframe 的 src 进行赋值，就会自动进行下载文件了，不过，如果后端在 response header 设置了某个头部，就会报错了：x-frame-options: DENY

x-frame-options，是否允许 object 和 iframe 展示，有三个参数：

DENY: 即使是相同域名，也不能显示

SAMEORIGIN: 可以在相同域名页面展示

ALLOW-FROM uri: 任何来源都可以展示

MDN的解释

我的后端同事在要下载的几个接口中，把 x-frame-options 设置成 SAMEOPIGIN 后，前端就可以在无任何副作用的情况下，通过 js 进行下载文件了

export: (url) => {
  // 移除旧的节点
  const oldNode = document.querySelector("#g-exportOrder-iframe")
  if (oldNode) {
    document.body.removeChild(document.querySelector("#g-exportOrder-iframe"))
  }
  // 生成新节点，进行下载
  const iframe = document.createElement("iframe")
  iframe.style.display = "none"
  iframe.id = "g-exportOrder-iframe"
  iframe.src = url
  document.body.appendChild(iframe)
}

只要调用传个 url ，就会自动下载一个文件了

使用 window.open

如果我们是点击一个目标，然后同步执行打开窗口操作，用 window.open 是可以的，但是我们把 window.open 放在异步操作里就有问题了

div.addEventListener("click", open, false)
function open() {
  setTimeout(() => {
    window.open("/api/admin/adslot/all")
  }, 1100)
}

我在谷歌、火狐和欧朋，这样就会被拦截，然而用 ie9 却不会被拦截，我给10秒，ie 最后还是会弹出来

从你用点击事件，到 window.open ，只要异步操作超过某个时间，浏览器就会拦截这个弹窗的操作

如果不添加用户的事件去触发 window.open （比如点击事件，鼠标移入移出等），而是在代码直接运行 window.open 的话，那样浏览器也会拦截

window.onload = function() {
  windon.open()
}

总得来讲，如果没有用用户操作的事件去触发 window.open 就会被拦截，而把 window.open 放在异步操作，且超过一定的事件，也会被拦截

这里先想到了解决异步也会被拦截的方法

var test = window.open()
setTimeout(function() {
  test.location = "http://www.xxx.com"
}, 2000)

在异步操作前，先打开窗口，然后再在你要操作的位置，更改这个窗口的 location ，不过这个缺陷有点大，要等异步操作完成了，新的窗口才会从空白变到指定页面，而且这种解决不了，没有人为事件触发 window.open 导致被拦截的问题

使用 a 标签

这是最常见打开一个新标签页面的方法

然后，我点击另外一个 div ，再打开新窗口

function open() {
  setTimeout(function() {
    document.querySelector(".test").click()
  }, 2000)
}

上面的异步操作，还是不行，就算是重新生成一个 a 标签，再用 click() 触发也是不行

form submit

click me
function open2() {
  setTimeout(() => {
    document.querySelector(".test").submit()
  }, 2000)
}

和 a 标签一样

DEMO 链接

总结

如果要下载文件的话，使用 iframe

如果要打开新窗口，而且没有用户操作的前提下打开，是不能显示的，只能提示让用户关闭那个拦截吧

有用户操作，且是异步的情况下，就使用 window.open ，然后定义 location 这样就好了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51447.html

js 打开新窗口方式

摘要：之前的项目，有个功能是下载文件，这里只要在浏览器输入就会下载那个文件了。之前的项目，有个功能是下载文件，这里只要在浏览器输入 url 就会下载那个文件了。当时我只是简单得使用 window.open ，但是却会被浏览器进行拦截，要手动开启才行，然后就搜索研究其他方法，就看到各种各样的，通过 js 打开新窗口的方法了，这里就总结一下解决下载功能这里就先说解决下载功能的方法，通过同事...

mgckid 2019-08-21 17:21 评论0 收藏0
浏览器拦截打开新窗口情况总结

摘要：在打开一个新窗口时，由于浏览器的安全机制，用户未始终允许的情况下，可能会触发到浏览器拦截，无法正常直接弹出。只分析使用代码手动打开新窗口的方式。所有浏览器都不允许非用户操作引起的打开新窗口。在打开一个新窗口时，由于浏览器的安全机制，用户未始终允许的情况下，可能会触发到浏览器拦截，无法正常直接弹出。网上有很多给出解决方案的只言片语，不够全面，所以针对自己遇到的问题做了详细的情况分析。...

Steven 2019-08-23 12:43 评论0 收藏0
JS打开新窗口的2种方式

摘要：超链接素材网等效于代码在同当前窗口中打开窗口超链接素材网等效于代码在另外新建窗口中打开窗口1.超链接Welcome 等效于js代码 window.location.href=//www.100sucai.com; //在同当前窗口中打开窗口 2.超链接Welcome 等效于js代码 window.open(//www.100sucai.com); ...

zacklee 2019-04-23 11:43 评论0 收藏0
window.open 打开新窗口被拦截的解决方案

摘要：使用包装一下，也可以防止被浏览器拦截。注意这里的超时时间不能太短，否则也会被拦截。我们会遇到想要弹出一个窗口，可是却是在事件执行后，才去弹出来的，这时就会被浏览器拦截，我们可以通过下面的方法来避免先用打开一个窗口，然后修改地址。最近公司开发的一个项目，平凡用到下载各种类型的文件，但是例如.txt,.jpg,.pdf格式的文件呢浏览器会在当前窗口直接打开，影响用户体验，尝试各种方案和百...

JeOam 2019-08-22 18:16 评论0 收藏0