H5在IOS中的问题_h5ios-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45747074/article/details/131002446

文章主要讨论了在H5页面开发中遇到的两个问题：一是axios响应数据后的URL跳转在iOS上失效，解决方案是使用计时器包裹跳转代码；二是iOS的300ms延迟问题，通过引入FastClick库解决，但可能存在的点击穿透问题需要重写focus方法来优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、URL跳转问题

1.场景：

H5页面需求：在axios响应的数据当中，其中有一个 url 地址，需要在请求响应成功后，跳转到这个指定的 url 地址处理方式：使用 window.location.href = url遇到的问题：pc端、android可以正常跳转，但是ios端无法跳转。

2.解决方案：

使用计时器包裹就可以实现正常跳转了。

timer = setTimeout(() => {
	window.location.href = url;
}, 0);

二、FastClick （300ms延迟）问题

1.场景：

因为IOS有FastClick机制，原因简单来说就是为了等待用户触发双击事件，但是这会影响到单击事件，并且无法触发单机事件。

2.解决方案：

使用第三方库 npm i fastclick

然后可以在全局引入，并绑定到body，全局生效。（或者在单页面引入，只对当前页面生效）

import FastClick from "fastclick";
FastClick.attach(document.body);

但是依然存在一个问题就是“点击穿透”，有时候点击不灵敏，所以需要重写方法

// 解决FastClick在IOS中需要多次点击才能获得焦点的问题
let deviceIsWindowsPhone = navigator.userAgent.indexOf("Windows Phone") >= 0;
let deviceIsIOS =
  /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone;
FastClick.prototype.focus = function (targetElement) {
  let length;
  if (
    deviceIsIOS &&
    targetElement.setSelectionRange &&
    targetElement.type.indexOf("date") !== 0 &&
    targetElement.type !== "time" &&
    targetElement.type !== "month" &&
    targetElement.type !== "email"
  ) {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
};