记录一下前端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);
  }
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐