日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

浏览器拦截打开新窗口情况总结

發布時間:2023/12/2 HTML 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 浏览器拦截打开新窗口情况总结 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在打開一個新窗口時,由于瀏覽器的安全機制,用戶未始終允許的情況下,可能會觸發到瀏覽器攔截,無法正常直接彈出。

網上有很多給出解決方案的只言片語,不夠全面,所以針對自己遇到的問題做了詳細的情況分析。總結成文,避免以后混淆。

只分析列舉使用 js 代碼手動打開新窗口的方式。

測試代碼用例在此

幾種打開新窗口的方式

  • window.open()
  • 創造 a 鏈接,手動觸發 a.click()
  • 創造 form 表單,手動觸發 form.submit() (創造 form 表單,添加 button 子元素,手動觸發 button.click() 情況相同,不做區分)
  • 調用情形分組結果

    使用 Chrome(70)、Firefox(63)、Edge、IE(9-11) 作為測試瀏覽器,對以下列舉的打開新窗口的情形做測試。

    x 表示被攔截,√ 表示新窗口正確打開

    直接打開

    即頁面加載后直接調用打開新窗口代碼

    方式ChromeFirefoxEdgeIE
    window.open()xxxx
    a.click()xxxx
    form.submit()xxxx

    用戶點擊行為

  • 按鈕點擊后直接打開

    即在按鈕被點擊的回調中,直接調用打開新窗口的代碼

    方式ChromeFirefoxEdgeIE
    window.open()
    a.click()
    form.submit()
  • 按鈕點擊后延時打開

    即在按鈕被點擊的回調中,通過 setTimeout 執行打開新窗口代碼

    方式ChromeFirefoxEdgeIE
    window.open()××
    a.click()××
    form.submit()××
  • 按鈕點擊后在異步請求回調中打開

    即在按鈕被點擊的回調中,發送請求,并在請求的回調中執行打開新窗口代碼

    方式ChromeFirefoxEdgeIE
    window.open()xxxx
    a.click()xxxx
    form.submit()xxxx
  • 用戶鍵盤行為

    我們以 input 元素進行測試(其他元素其他鍵盤事件也有相同效果),因為最可能使用的情況為 input 中使用回車打開新窗口。

  • input keydown后直接打開

    方式ChromeFirefoxEdgeIE
    window.open()xx
    a.click()xx
    form.submit()xx

    其中 ie9、ie10雖然會彈出攔截彈窗提示,但是能打開新窗口

  • 按鈕點擊后延時打開

    方式ChromeFirefoxEdgeIE
    window.open()xxx
    a.click()xxx
    form.submit()xxx
  • 按鈕點擊后在異步請求回調中打開

    方式ChromeFirefoxEdgeIE
    window.open()xxxx
    a.click()xxxx
    form.submit()xxxx
  • 規則總結

  • 就參與測試的瀏覽器,三種打開新窗口的方式對攔截結果沒有影響。
  • 所有瀏覽器都不允許非用戶操作引起的打開新窗口。
  • 所有瀏覽器都不允許在異步 ajax 請求中打開新窗口。
  • Edge 和 IE 不允許在 setTimeout 中打開新窗口,Chrome、Firefox 允許在用戶操作事件中的 setTimeout 中打開新窗口。
  • Firefox 和 IE 不允許在用戶鍵盤操作事件中打開新窗口
  • 解決方案

  • 需要在異步 ajax 請求中打開新窗口的可以使用請求前打開新窗口,請求拿到結果后再修改窗口地址的方式。
  • 需要在鍵盤回車事件中打開新窗口的推薦使用 form 表單包裝并添加 button 的方式,回車觸發默認的 submit 事件進行新窗口的打開。
  • 總結

    以上是生活随笔為你收集整理的浏览器拦截打开新窗口情况总结的全部內容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。