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

資訊專欄INFORMATION COLUMN

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

Jensen / 1308人閱讀

摘要：之前的項(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 這樣就好了

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

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

相關(guān)文章

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

    摘要：之前的項(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ò)同事...

    mgckid 評(píng)論0 收藏0

  • 瀏覽器攔截打開(kāi)新窗口情況總結(jié)

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

    Steven 評(píng)論0 收藏0

  • JS打開(kāi)新窗口的2種方式

    摘要：超鏈接素材網(wǎng)等效于代碼在同當(dāng)前窗口中打開(kāi)窗口超鏈接素材網(wǎng)等效于代碼在另外新建窗口中打開(kāi)窗口1.超鏈接Welcome 等效于js代碼 window.location.href=//www.100sucai.com;???? //在同當(dāng)前窗口中打開(kāi)窗口 ? 2.超鏈接Welcome 等效于js代碼 window.open(//www.100sucai.com);???????????????? ...

    zacklee 評(píng)論0 收藏0

  • window.open 打開(kāi)新窗口被攔截的解決方案

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

    JeOam 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<