场景:在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>