【JavaScript】Safari無法響應點擊事件

場景：在IOS移動端掃描某個應用的二維碼會跳轉至一個該應用的下載頁，點擊下載按鈕後下載該應用。

但是會出現有些IOS手機點擊下載按鈕沒有反應的問題。起初有懷疑是不是操作系統的原因，但經過測試發現同樣是IOS 13.1.3的操作系統，有的可以有的不行。因此就懷疑是不是Safari對html或者js有兼容性問題。

網上簡單查了一下，發現確實有人談到類似的問題，說是Safari的安全機制將其阻止，沒辦法在回調函數裏面執行window.open，例如ajax回調裏面執行window.open就會失效。如下是修改前的點擊事件。

    <div class="bg">
        <div class="box">
            <img src="/logo.png" th:attr="src=${version.iconUrl}" class="logo"/>
            <h1 th:text="${version.appName}"></h1>
            <h3>版本：<span th:text="${version.version}"></span> 大小：<span th:text="${formatSize}"></span>M 更新時間：<span th:text="${formatDate}"></span></h3>
            <img src="" th:attr="src=${version.qrCodeUrl}" class="logo2"/>
            <h1></h1>
            <button id="download" th:onclick="'window.open(\'itms-services://?action=download-manifest&url=' + ${version.versionFileUrl} + '\')'">點擊下載</button>
            <h3>或者用手機掃描二維碼安裝</h3>
        </div>
    </div>

將window.open修改爲window.location.href，經過各個IOS操作系統測試，均是可以響應的。

    <div class="bg">
        <div class="box">
            <img src="/logo.png" th:attr="src=${version.iconUrl}" class="logo"/>
            <h1 th:text="${version.appName}"></h1>
            <h3>版本：<span th:text="${version.version}"></span> 大小：<span th:text="${formatSize}"></span>M 更新時間：<span th:text="${formatDate}"></span></h3>
            <img src="" th:attr="src=${version.qrCodeUrl}" class="logo2"/>
            <h1></h1>
            <button id="download" th:onclick="'window.location.href=\'itms-services://?action=download-manifest&url=' + ${version.versionFileUrl} + '\''">點擊下載</button>
            <h3>或者用手機掃描二維碼安裝</h3>
        </div>
    </div>