成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

js 打開新窗口方式

mgckid / 3110人閱讀

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

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

這里就先說解決下載功能的方法，通過同事的提醒，改用 iframe 進(jìn)行處理，直接對(duì) iframe 的 src 進(jìn)行賦值，就會(huì)自動(dòng)進(jìn)行下載文件了，不過，如果后端在 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: 任何來源都可以展示

MDN的解釋

我的后端同事在要下載的幾個(gè)接口中，把 x-frame-options 設(shè)置成 SAMEOPIGIN 后，前端就可以在無任何副作用的情況下，通過 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í)行打開窗口操作，用 window.open 是可以的，但是我們把 window.open 放在異步操作里就有問題了

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

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

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

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

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

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

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

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

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

使用 a 標(biāo)簽

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

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

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

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

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

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

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

相關(guān)文章

  • js 打開新窗口方式

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

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

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

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

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

  • JS打開新窗口的2種方式

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

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

  • window.open 打開新窗口被攔截的解決方案

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<