js 打開新窗口方式

mgckid 發(fā)布于2019-08-21 17:21 / 3051人閱讀

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。

之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結(jié)一下

解決下載功能

這里就先說解決下載功能的方法，通過同事的提醒，改用 iframe 進行處理，直接對 iframe 的 src 進行賦值，就會自動進行下載文件了，不過，如果后端在 response header 設置了某個頭部，就會報錯了：x-frame-options: DENY

x-frame-options，是否允許 object 和 iframe 展示，有三個參數(shù)：

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

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

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

MDN的解釋

我的后端同事在要下載的幾個接口中，把 x-frame-options 設置成 SAMEOPIGIN 后，前端就可以在無任何副作用的情況下，通過 js 進行下載文件了

export: (url) => {
  // 移除舊的節(jié)點
  const oldNode = document.querySelector("#g-exportOrder-iframe")
  if (oldNode) {
    document.body.removeChild(document.querySelector("#g-exportOrder-iframe"))
  }
  // 生成新節(jié)點，進行下載
  const iframe = document.createElement("iframe")
  iframe.style.display = "none"
  iframe.id = "g-exportOrder-iframe"
  iframe.src = url
  document.body.appendChild(iframe)
}

只要調(diào)用傳個 url ，就會自動下載一個文件了

使用 window.open

如果我們是點擊一個目標，然后同步執(zhí)行打開窗口操作，用 window.open 是可以的，但是我們把 window.open 放在異步操作里就有問題了

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

我在谷歌、火狐和歐朋，這樣就會被攔截，然而用 ie9 卻不會被攔截，我給10秒，ie 最后還是會彈出來

從你用點擊事件，到 window.open ，只要異步操作超過某個時間，瀏覽器就會攔截這個彈窗的操作

如果不添加用戶的事件去觸發(fā) window.open （比如點擊事件，鼠標移入移出等），而是在代碼直接運行 window.open 的話，那樣瀏覽器也會攔截

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

總得來講，如果沒有用用戶操作的事件去觸發(fā) window.open 就會被攔截，而把 window.open 放在異步操作，且超過一定的事件，也會被攔截

這里先想到了解決異步也會被攔截的方法

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

在異步操作前，先打開窗口，然后再在你要操作的位置，更改這個窗口的 location ，不過這個缺陷有點大，要等異步操作完成了，新的窗口才會從空白變到指定頁面，而且這種解決不了，沒有人為事件觸發(fā) window.open 導致被攔截的問題

使用 a 標簽

這是最常見打開一個新標簽頁面的方法

然后，我點擊另外一個 div ，再打開新窗口

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

上面的異步操作，還是不行，就算是重新生成一個 a 標簽，再用 click() 觸發(fā)也是不行

form submit

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

和 a 標簽一樣

DEMO 鏈接

總結(jié)

如果要下載文件的話，使用 iframe

如果要打開新窗口，而且沒有用戶操作的前提下打開，是不能顯示的，只能提示讓用戶關閉那個攔截吧

有用戶操作，且是異步的情況下，就使用 window.open ，然后定義 location 這樣就好了

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89402.html

js 打開新窗口方式

摘要：之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入就會下載那個文件了。之前的項目，有個功能是下載文件，這里只要在瀏覽器輸入 url 就會下載那個文件了。當時我只是簡單得使用 window.open ，但是卻會被瀏覽器進行攔截，要手動開啟才行，然后就搜索研究其他方法，就看到各種各樣的，通過 js 打開新窗口的方法了，這里就總結(jié)一下解決下載功能這里就先說解決下載功能的方法，通過同事...

Jensen 2019-08-01 17:54 評論0 收藏0
瀏覽器攔截打開新窗口情況總結(jié)

摘要：在打開一個新窗口時，由于瀏覽器的安全機制，用戶未始終允許的情況下，可能會觸發(fā)到瀏覽器攔截，無法正常直接彈出。只分析使用代碼手動打開新窗口的方式。所有瀏覽器都不允許非用戶操作引起的打開新窗口。在打開一個新窗口時，由于瀏覽器的安全機制，用戶未始終允許的情況下，可能會觸發(fā)到瀏覽器攔截，無法正常直接彈出。網(wǎng)上有很多給出解決方案的只言片語，不夠全面，所以針對自己遇到的問題做了詳細的情況分析。...

Steven 2019-08-23 12:43 評論0 收藏0
JS打開新窗口的2種方式

摘要：超鏈接素材網(wǎng)等效于代碼在同當前窗口中打開窗口超鏈接素材網(wǎng)等效于代碼在另外新建窗口中打開窗口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 打開新窗口被攔截的解決方案

摘要：使用包裝一下，也可以防止被瀏覽器攔截。注意這里的超時時間不能太短，否則也會被攔截。我們會遇到想要彈出一個窗口，可是卻是在事件執(zhí)行后，才去彈出來的，這時就會被瀏覽器攔截，我們可以通過下面的方法來避免先用打開一個窗口，然后修改地址。最近公司開發(fā)的一個項目，平凡用到下載各種類型的文件，但是例如.txt,.jpg,.pdf格式的文件呢瀏覽器會在當前窗口直接打開，影響用戶體驗，嘗試各種方案和百...

JeOam 2019-08-22 18:16 評論0 收藏0