【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:οnclick="'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:οnclick="'window.location.href=\'itms-services://?action=download-manifest&url=' + ${version.versionFileUrl} + '\''">点击下载</button>
            <h3>或者用手机扫描二维码安装</h3>
        </div>
    </div>