場景

最新在做一個H5功能，做附件下載。
適用場景: 新窗口打開一個連接。

思路

根據(jù)附件id查詢出附件地址之后，利用 window.open(failUrl) 打開新窗口來下載附件。

現(xiàn)象

安卓手機(jī)所測試的常用瀏覽器基本上都沒問題，唯獨(dú)iphone手機(jī)自帶的safari瀏覽器不生效。

解決辦法

對safari瀏覽器做特殊判斷。

• 判斷safari瀏覽器的方法

/* 判斷是否是ios手機(jī)safari瀏覽器打開的 */
export const isIosSafari = () => {
  const ua = navigator.userAgent.toLowerCase();
  if (
    ua.indexOf('applewebkit') > -1 &&
    ua.indexOf('mobile') > -1 &&
    ua.indexOf('safari') > -1 &&
    !(ua.indexOf('android') > -1) &&
    !(ua.indexOf('linux') > -1) &&
    !(ua.indexOf('crios') > -1) && 
    !(ua.indexOf('chrome') > -1) && 
    !(ua.indexOf('browser') > -1) && 
    !(ua.indexOf('ios') > -1)
  ) {
    return true;
  }
  return false;
};

方案一 (推薦)

先打開一個空白窗口，然后再給窗口賦值地址。

// 按鈕
<span onClick={() => this.handleDownload(item)}>下載文件</span>

/* 下載文件方法 */
handleDownload = (item) => {
  const { dispatch } = this.props;
  // 要先定義打開新窗口，否則也會被攔截  不生效
  const winRef = window.open("about:blank","_blank");
  dispatch({
    type: 'common/downloadFile',
    payload: { fileId: item.fileId },
    callback: (data) => {
      // 后臺接口返回回來的地址  fileUrl1
      const fileUrl1 = data.fileUrl;
      winRef.location = fileUrl1;
    }
  });
};

如果const winRef = window.open("about:blank","_blank");放在異步回調(diào)函數(shù)中，恭喜你，不會生效，會被攔截喲~

方案二

當(dāng)時safari瀏覽器的時候，我們通過超鏈接點(diǎn)擊來跳轉(zhuǎn)。
創(chuàng)建的標(biāo)簽，執(zhí)行TagA.click()方法，在safari上也是不生效的，有老鐵說safari下的A標(biāo)簽?zāi)J(rèn)是沒有綁定事件，那么我們就可以手動綁定一個事件，然后觸發(fā)即可。

 /* 利用a標(biāo)簽下載附件 */
  downloadFileByTagA = (fileUrl) => {
    const TagA = document.createElement('a');
    TagA.href = fileUrl;
    // TagA.target = '__blank';
    document.body.appendChild(aSpan);
    TagA.className = 'oInput';
    TagA.style.display = 'none';

    // 兼容ios safari瀏覽器
    const e = document.createEvent('MouseEvent');     
    e.initEvent('click', false, false);     
    TagA.dispatchEvent(e);
  }

上訴??代碼我注釋掉了TagA.target = '__blank'; 應(yīng)為我加上去之后就不生效了，被safari安全機(jī)制攔截了。

當(dāng)然這個可以通過 蘋果系統(tǒng)設(shè)置，偏好設(shè)置->安全性，去掉阻止彈窗的復(fù)選框 來解決~~~。

方案三

生成一個a標(biāo)簽，讓用戶自己去點(diǎn)擊。這個無論如何都不會被攔截。
不過這樣也不好，會使用戶多一步操作。

方案四

蘋果系統(tǒng)設(shè)置，偏好設(shè)置->安全性，去掉阻止彈窗的復(fù)選框，如上所述。不太推薦，改變了用戶的主觀意愿

復(fù)盤分析

首先連接是無論如何不會被攔截的，可以生成一個連接讓用戶去點(diǎn)擊，這樣不太友好~~~

<a id="file-download-a"  target="__blank">
  我是一個連接呀
</a>

為什么會被攔擊呢？
當(dāng)然是window.open被廣告商濫用，嚴(yán)重影響用戶的使用。
當(dāng)然也不是所有的window.open都會被攔截，我們只需要找準(zhǔn)時機(jī)去觸發(fā)即可。
避免在回調(diào)函數(shù)中去執(zhí)行window.open方法。