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

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

问题1

通过document.execCommand('copy');方法调用复制功能,在ios端无效。

解决办法:

利用copy-to-clipboard库实现复制


问题2

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


如下示例:

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

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

解决办法:

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

<divclassName="copy-btn"onClick={this.copyUrl}>复制链接</div>// 提前获取异步数据,并存储到state中asynccomponentDidMount() {
constpostData= {
expire: this.state.whichTagExpire,
tagId: this.state.whichTagIdSelected    }
constpath='/tag/getUrl';
constres=awaitHttp.post(path, postData);
this.setState({
url: res.data  })
  }
// 点击复制按钮,直接调用copy,复制urlcopyUrl= () => {
copy(this.state.url);
  }


目录
相关文章
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
35 0
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)
37 0
|
3月前
|
Web App开发 前端开发 异构计算
前端如何实现网页变灰功能?
前端如何实现网页变灰功能?
|
11天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
1月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
50 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
2月前
|
小程序 前端开发 IDE
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
【经验分享】支付宝小程序订阅消息功能实操(前端篇)|江海计划
100 1
|
3月前
|
移动开发 前端开发 Windows
前端H5怎么简单的实现复制text内容的操作
前端H5怎么简单的实现复制text内容的操作
27 0
前端H5怎么简单的实现复制text内容的操作
|
3月前
|
负载均衡 前端开发 Java
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
字节后端面试题(前端发送请求到后端的过程(MVC),网关gateway作用,怎么解决跨域,各微服务组件作用)
126 0
|
3月前
|
存储 前端开发 JavaScript
【前端面试题】这些js功能你一定要学会
【前端面试题】这些js功能你一定要学会
|
3月前
|
前端开发 JavaScript 搜索推荐
前端快速实现快捷键功能,超实用!
前端快速实现快捷键功能,超实用!