记录一下前端H5的复制功能在ios端的兼容性问题

本文探讨了iOS设备上H5前端复制功能存在的两个主要问题:1) `document.execCommand('copy')` 方法失效;2) 不支持复制异步数据。针对这些问题,提出了使用`copy-to-clipboard`库替代原生方法,以及预先获取并存储异步数据,以确保点击按钮时能正确复制数据。这些解决方案有助于优化H5应用在iOS环境下的用户体验。
摘要由CSDN通过智能技术生成

记录一下前端H5的复制功能在ios端的兼容性问题

问题1

通过document.execCommand('copy');方法调用复制功能,在ios端无效。
解决办法:
利用copy-to-clipboard库实现复制

问题2

ios端复制,不支持点击复制功能,先异步请求后台数据,再复制后台返回的异步数据。简而言之就是,ios的复制方法,不能复制异步数据,只能复制同步数据。

如下示例:
点击“复制链接”按钮,先调用后端接口获取数据、再复制数据,这样ios是不能复制异步数据的

  <div className="copy-btn" onClick={this.copyUrl}>复制链接</div>
  // 点击复制按钮
  copyUrl = async () => {
    const postData = {
      expire: this.state.whichTagExpire,
      tagId: this.state.whichTagIdSelected
    }
    const path = '/tag/getUrl';
    // 获取异步数据
    const res = await Http.post(path, postData);
    // 复制数据
    copy(res.data);
  }

解决办法:
提前获取异步数据,点击“复制链接”按钮,就只执行复制,而不请求后台接口

  <div className="copy-btn" onClick={this.copyUrl}>复制链接</div>
  // 提前获取异步数据,并存储到state中
  async componentDidMount() {
    const postData = {
      expire: this.state.whichTagExpire,
      tagId: this.state.whichTagIdSelected
    }
    const path = '/tag/getUrl';
    const res = await Http.post(path, postData);
    this.setState({
	  url: res.data
	})
  }
  // 点击复制按钮,直接调用copy,复制url
  copyUrl = () => {
    copy(this.state.url);
  }
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值