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


目录
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
699 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
存储 前端开发 JavaScript
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
3759 64
|
监控 搜索推荐 数据安全/隐私保护
深入探索iOS 14的隐私保护功能
本文将深入探讨iOS 14操作系统中的隐私保护功能,包括新的隐私指示器、应用程序跟踪透明度以及增强的隐私设置。我们将分析这些功能如何提高用户对个人数据的控制权,并讨论它们对应用开发者和广告行业的影响。
534 28
|
存储 安全 数据安全/隐私保护
深入解析iOS 14隐私保护功能:用户数据安全的新里程碑
随着数字时代的到来,个人隐私保护成为全球关注的焦点。苹果公司在最新的iOS 14系统中引入了一系列创新的隐私保护功能,旨在为用户提供更透明的数据使用信息和更强的控制权。本文将深入探讨iOS 14中的几项关键隐私功能,包括App跟踪透明性、简化的隐私设置以及增强的系统安全性,分析它们如何共同作用以提升用户的隐私保护水平。
906 3
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
762 4
|
安全 Android开发 iOS开发
Android vs iOS:探索移动操作系统的设计与功能差异###
【10月更文挑战第20天】 本文深入分析了Android和iOS两个主流移动操作系统在设计哲学、用户体验、技术架构等方面的显著差异。通过对比,揭示了这两种系统各自的独特优势与局限性,并探讨了它们如何塑造了我们的数字生活方式。无论你是开发者还是普通用户,理解这些差异都有助于更好地选择和使用你的移动设备。 ###
667 3
|
移动开发 前端开发 JavaScript
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能
2431 1
|
前端开发 JavaScript Shell
深入解析前端构建利器:webpack核心概念与基本功能全览
深入解析前端构建利器:webpack核心概念与基本功能全览—
443 1
|
前端开发 JavaScript
前端中的“+”连接符,居然有鲜为人知的强大功能!
【10月更文挑战第9天】前端中的“+”连接符,居然有鲜为人知的强大功能!
284 0
前端中的“+”连接符,居然有鲜为人知的强大功能!
|
Web App开发 存储 前端开发
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
前端开发必备:requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比
1028 0