js 打開(kāi)新窗口方式

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

摘要：之前的項(xiàng)目，有個(gè)功能是下載文件，這里只要在瀏覽器輸入就會(huì)下載那個(gè)文件了。

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

解決下載功能

這里就先說(shuō)解決下載功能的方法，通過(guò)同事的提醒，改用 iframe 進(jìn)行處理，直接對(duì) iframe 的 src 進(jìn)行賦值，就會(huì)自動(dòng)進(jìn)行下載文件了，不過(guò)，如果后端在 response header 設(shè)置了某個(gè)頭部，就會(huì)報(bào)錯(cuò)了：x-frame-options: DENY

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

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

SAMEORIGIN: 可以在相同域名頁(yè)面展示

ALLOW-FROM uri: 任何來(lái)源都可以展示

MDN的解釋

我的后端同事在要下載的幾個(gè)接口中，把 x-frame-options 設(shè)置成 SAMEOPIGIN 后，前端就可以在無(wú)任何副作用的情況下，通過(guò) js 進(jìn)行下載文件了

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

只要調(diào)用傳個(gè) url ，就會(huì)自動(dòng)下載一個(gè)文件了

使用 window.open

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

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

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

從你用點(diǎn)擊事件，到 window.open ，只要異步操作超過(guò)某個(gè)時(shí)間，瀏覽器就會(huì)攔截這個(gè)彈窗的操作

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

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

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

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

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

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

使用 a 標(biāo)簽

這是最常見(jiàn)打開(kāi)一個(gè)新標(biāo)簽頁(yè)面的方法

然后，我點(diǎn)擊另外一個(gè) div ，再打開(kāi)新窗口

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

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

form submit

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

和 a 標(biāo)簽一樣

DEMO 鏈接

總結(jié)

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

如果要打開(kāi)新窗口，而且沒(méi)有用戶操作的前提下打開(kāi)，是不能顯示的，只能提示讓用戶關(guān)閉那個(gè)攔截吧

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

GPU云服務(wù)器云服務(wù)器 js跳轉(zhuǎn)新窗口打開(kāi) js打開(kāi)新窗口插入數(shù)據(jù) 新窗口打開(kāi) 打開(kāi)新窗口

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89402.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

mgckid

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

關(guān)于ADC芯片的選型

閱讀 3532·2021-09-27 13:35
前端用戶體驗(yàn)優(yōu)化： JS & CSS 各類(lèi)效果代碼段

閱讀 3571·2019-08-29 17:09
Vue官網(wǎng)todoMVC示例

閱讀 2450·2019-08-26 11:30
JavaScript中簡(jiǎn)單的實(shí)現(xiàn)動(dòng)畫(huà)緩存效果

閱讀 711·2019-08-26 10:32
Vue全家桶高仿網(wǎng)易云音樂(lè)mac客戶端版（不像賠十個(gè)?。。?/a>

閱讀 545·2019-08-26 10:23

利用 Canvas 繪畫(huà)一個(gè)未閉合的帶進(jìn)度條的圓環(huán)

閱讀 1206·2019-08-26 10:20
call&apply&bind的js實(shí)現(xiàn)以及應(yīng)用

閱讀 3161·2019-08-23 15:26
解決圖片顯示 Exif.js更改圖片的顯示方向

閱讀 3571·2019-08-23 14:33

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js 打開(kāi)新窗口方式

相關(guān)文章