window.open()被瀏覽器攔截問題彙總

時間 2020-05-08

標籤 window.open window open 瀏覽器攔截問題彙總欄目 Windows 简体版

原文原文鏈接

1、問題描述html

最近在作項目的時候碰到了使用window.open被瀏覽器攔截的狀況，雖然在本身的環境能夠對頁面進行放行，可是對用戶來講，不能要求用戶都來經過攔截。況且當出現攔截時，不少用戶根本不知道發生了啥，不知道在哪裏看被攔截的頁面。所以必須經過代碼來解決這個問題！ios

如下是瀏覽器攔截示例：ajax

2、問題分析

瀏覽器之因此攔截新開窗口是由於該操做並非用戶主動觸發的，因此它認爲這是不安全的就攔截了，即便 ajax 回調函數中模擬執行 click 或者 submit 等用戶行爲（trigger('click')），瀏覽器也會認爲不是由用戶主動觸發的，所以不能被安全執行，因此被攔截。

3、window.open()語法

window.open(url, name, features, replace) 　　Arguments - 參數　　url 　　可選字符串參數，指向要在新窗口中顯示的文檔的URL。若是省略該參數，或者參數爲空字符串，新窗口不會顯示文檔。 　　name 　　可選字符串參數，該參數能夠設置新窗口的名稱。 　　相同name的窗口只能建立一個，要想建立多個窗口則name不能相同。 　　features 　　可選字符串參數，該參數用於設定新窗口的功能。由於該參數是可選的，若是沒有指定該參數，新窗口有全部的標準功能。 　　replace 　　可選布爾參數，設置新窗口中的操做歷史的保存方式。 　　true - 建立新歷史記錄 　　false - 替換舊的歷史記錄 Returns - 返回值 　　一個根據name參數對新建立的或已存在的窗口對象的引用。 Description - 描述 　　open()方法能夠查找一個已經存在的或者新建的瀏覽器窗口。若是name參數指定了一個已經存在的劉瀏覽器窗口，則返回對該窗口的引用。返回的窗口中將顯示URL中指定的文檔，可是features參數會被忽略。open()方法是JavaScript中惟一經過名稱得到瀏覽器窗口引用的途徑。 　　若是沒有指定name參數，或者不存在name參數指定的名稱的窗口，open()方法將建立一個新的瀏覽器窗口。 　　name參數用於指定新窗口的名稱，該名稱必須由字母、數字和下劃線字符組成。它能夠被HTML文檔中的<a>標記或<form>標記指向。 　　當你使用window.open()方法加載一個新的文檔到一個已經存在了命名的窗口中時，你能夠經過replace參數設置歷史記錄的保存方式.。若是該參數是true, 新文檔的歷史記錄將取代舊文檔的歷史記錄。 若是該參數爲false或這沒有指定該參數，新的文件在窗口的瀏覽歷史記錄中將創建本身的條目。該參數提供了location.replace()相同功能的方式。 　　不要把"Window.open( ) "和"Document.open( )"混淆；這是兩個徹底不同的方法。爲了讓代碼更明晰，你能夠用"Window.open( )"代替 "open( )"。做爲HTML屬性定義事件處理程序時， "open( )" 通常被解釋爲"Document.open( )"，因此在這種狀況下，你必須使用"Window.open( )"。 Window Features - 窗口特性 　　feature參數是一個用逗號分隔的功能列表。若是該參數爲空或者沒有指定該參數，新的窗口將擁有全部的功能。另外一方面, 若是feature參數只指定了某一項或某幾項功能，那麼其餘沒有被指定的功能將不會出如今新的窗口中。該字符串不能包含任何空格或其它空字符串。 　　列表中的每一個元素的格式：功能[=值] 　　對於絕大多數的功能來講，它們的值通常都是yes或no。對這些功能，等號和值均可以省略不寫。 對於 width和height特性，必須給它們指定一個以像素爲單位的值。 　　一下是一些廣泛支持的功能和它們的含義： 　　height 　　設定窗口顯示區域的像素寬度 　　left 　　瀏覽器窗口距離屏幕左邊的距離 　　location 　　指明地址欄在新窗口中是否可見 　　menubar 　　指明菜單欄在新窗口中是否可見 　　resizable 　　指明新窗口是否能夠調整大小 　　scrollbars 　　指明滾動欄在新窗口中是否可見 　　status 　　指明狀態欄在新窗口中是否可見 　　toolbar 　　指明工具欄在新窗口中是否可見 　　top 　　設定新窗口距屏幕上方的距離 　　width 　　設定窗口顯示區域的像素寬度 　　alwaysLowered 　　指定窗口隱藏在全部窗口之下 　　alwaysRaised 　　指定窗口浮在全部窗口之上 　　dependent 　　指定打開的窗口爲父窗口的一個子窗口。並隨父窗口的關閉而關閉 　　directions 　　指定Navigator 2和3的目錄欄是否在新窗口中可見 　　hotkeys 　　在沒有菜單欄的新窗口設置安全退出熱鍵 　　innerHeight 　　設置新窗口中文檔的像素高度 　　innerWidth 　　設置新窗口中文檔的像素寬度 　　menubar 　　指明菜單欄在新窗口中是否可見 　　outerHeight 　　設定窗口（包括裝飾邊框）的像素高度 　　outerWidth 　　設定窗口（包括裝飾邊框）的像素寬度 　　screenX 　　設定新窗口離屏幕邊界的像素長度 　　screenY 　　設定新窗口離屏幕上邊界的像素長度 　　titlebar 　　指明菜單題目欄在新窗口是否可見 　　z-look 　　在文檔中包含各個 <pplet>標籤的數組 　　fullscreen 　　打開的窗體是否進行全屏顯示

4、代碼模擬axios

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>測試彈框攔截</title>
  <script>
    window.open("http://www.cnblogs.com/chenyablog/","測試彈框","top=nInt,left=nInt,width=nInt,height=nInt,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no");
  </script>
</head>
<body>
   <h1>測試彈框攔截</h1>
</body>
</html>

5、解決方案

在ajax請求以前，先用window.open 打開一個空白窗口，而後在ajax的響應函數中設置該窗口的location屬性爲新的url。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>測試彈框攔截</title>
  <script>
    async displayProjectileFrame (type) {
      const title = '測試彈框攔截'
      // 先打開一個窗口
      let newWindow = window.open()       //給新窗口設置標題
      newWindow.document.title = title
      try {
        const base = 'xxxxxxxxxx'
          // 這裏是模擬ajax，不一樣使用場景須要有所變化
        const openUrl = await this.$axios.$get('/xxx/xxxx', {
          params: {
            base
          }
        })
        if (openUrl) {
          // 重定向
          newWindow.location = openUrl
        }
      } catch (e) {
        this.$axiosError(e)
      }
    }
  </script>
</head>
<body>
   <h1>測試彈框攔截</h1>
</body>
</html>

6、小結數組

上面方法，存在一個問題時，由於先打開了空白窗口，若是ajax請求失敗（網絡或業務邏輯問題）後， 新窗口中就不會有正常的結果體現，有可能形成用戶疑惑。 一個解決辦法是，當ajax出現問題時，能夠考慮給出一個提示，如 newWindow.document.write("服務器處理異常"); 甚至爲了防止ajax響應時間過長，當窗口新建後，當即給出提示 newWindow.document.write("服務器正在處理中，請稍後"); 後面若是ajax正常返回，則由於設置了location值，原來打印的信息會被新的頁面信息覆蓋。

7、思考瀏覽器

對於動態打開新窗口，沒有特別完美的方法。具體還需根據特定的業務場景來採起相應的作法！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。