場景
最新在做一個(gè)H5功能程储，做附件下載瓤檐。
適用場景: 新窗口打開一個(gè)連接。
思路
根據(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;
};
方案一 (推薦)
先打開一個(gè)空白窗口，然后再給窗口賦值地址认罩。
// 按鈕
<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)時(shí)safari瀏覽器的時(shí)候，我們通過超鏈接點(diǎn)擊來跳轉(zhuǎn)劫拗。
創(chuàng)建的標(biāo)簽间校，執(zhí)行TagA.click()方法，在safari上也是不生效的页慷，有老鐵說safari下的A標(biāo)簽?zāi)J(rèn)是沒有綁定事件憔足，那么我們就可以手動(dòng)綁定一個(gè)事件胁附，然后觸發(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)然這個(gè)可以通過 蘋果系統(tǒng)設(shè)置，偏好設(shè)置->安全性找蜜，去掉阻止彈窗的復(fù)選框 來解決~~~饼暑。
方案三
生成一個(gè)a標(biāo)簽，讓用戶自己去點(diǎn)擊洗做。這個(gè)無論如何都不會被攔截弓叛。
不過這樣也不好，會使用戶多一步操作诚纸。
方案四
蘋果系統(tǒng)設(shè)置撰筷，偏好設(shè)置->安全性，去掉阻止彈窗的復(fù)選框畦徘，如上所述毕籽。不太推薦，改變了用戶的主觀意愿
復(fù)盤分析
首先連接是無論如何不會被攔截的井辆，可以生成一個(gè)連接讓用戶去點(diǎn)擊关筒，這樣不太友好~~~
<a id="file-download-a" target="__blank">
我是一個(gè)連接呀
</a>
為什么會被攔擊呢？
當(dāng)然是window.open被廣告商濫用杯缺，嚴(yán)重影響用戶的使用蒸播。
當(dāng)然也不是所有的window.open都會被攔截，我們只需要找準(zhǔn)時(shí)機(jī)去觸發(fā)即可萍肆。
避免在回調(diào)函數(shù)中去執(zhí)行window.open方法袍榆。
