文章目录copyOptions 是什么完整代码示例HTML 页面用于测试三种模式的实际表现和 H5 层 user-select 的区别实际业务场景踩坑记录写在最后上两篇讲的都是 H5 层面的剪贴板操作。但有些场景下你需要的不是监听或修改而是直接在框架层禁止用户复制 Web 内容。比如付费阅读应用、版权保护场景、企业内部文件展示……用 H5 的user-select: noneCSS 并不可靠用户可以打开开发者工具绕过但通过 ArkTS 层的copyOptions属性来控制就彻底多了。copyOptions 是什么copyOptions是 Web 组件的一个 ArkTS 属性用来控制 Web 页面内容的复制行为。它接受的值来自CopyOptions枚举枚举值含义CopyOptions.None完全禁止复制——用户无法选中文本也无法复制CopyOptions.InApp只允许在应用内部复制不能粘贴到其他应用CopyOptions.LocalDevice允许在本设备范围内复制粘贴默认值CopyOptions.CROSS_DEVICE仅部分场景跨设备复制完整代码示例import{webview}fromkit.ArkWeb;EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();// 当前复制选项可通过按钮动态切换StatecopyOption:CopyOptionsCopyOptions.LocalDevice;build(){Column({space:12}){// 切换复制选项的按钮组Row({space:8}){Button(禁止复制).onClick((){this.copyOptionCopyOptions.None;})Button(仅应用内).onClick((){this.copyOptionCopyOptions.InApp;})Button(本设备).onClick((){this.copyOptionCopyOptions.LocalDevice;})}.padding(12)// Web 组件通过 .copyOptions() 绑定状态Web({src:$rawfile(copyOptions.html),controller:this.controller}).copyOptions(this.copyOption).width(100%).layoutWeight(1)}.height(100%).width(100%)}}注意State copyOption的用法——把copyOptions绑定到状态变量后切换按钮就能实时改变 Web 组件的复制权限不需要重新加载页面。HTML 页面用于测试!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title复制选项测试/titlestylebody{padding:24px;font-size:16px;line-height:1.6;}.content-block{padding:16px;background:#f9f9f9;border-radius:8px;margin:12px 0;}/style/headbodyh2复制选项测试页面/h2divclasscontent-blockp这是一段版权内容请尝试选中并复制这段文字。/pp根据当前的 copyOptions 设置复制行为会有所不同/pulliCopyOptions.None完全无法选中文本/liliCopyOptions.InApp可以选中但只能在应用内粘贴/liliCopyOptions.LocalDevice正常复制粘贴默认/li/ul/div/body/html三种模式的实际表现和 H5 层 user-select 的区别很多人第一反应是用 CSS 的user-select: none来禁止复制body{user-select:none;-webkit-user-select:none;}这确实能阻止普通用户但有两个问题用户打开 DevTools 可以轻松去掉这个样式某些辅助功能工具屏幕阅读器等可以绕过它而CopyOptions.None是在框架层实现的Web 渲染引擎在底层就屏蔽了文本选择能力JS 也无法绕过。这个级别的保护比纯 CSS 方案强得多。实际业务场景付费阅读 App对免费内容用LocalDevice对付费内容用InApp甚至None防止用户复制后分发。企业内部文件查看器将文件内容渲染在 Web 组件里设置为InApp文件内容可以在应用内引用但不能直接粘贴到微信/邮件外传。合同/协议展示页设置为LocalDevice默认让用户可以正常复制协议条款方便他们查询和保存。踩坑记录坑CopyOptions.None 会影响可访问性设置为None后屏幕阅读器也无法正常选中页面内容。如果你的应用需要支持无障碍功能要谨慎使用None优先考虑InApp。坑动态切换 copyOptions 时已选中的文本不会立即取消选中如果用户在你切换到None之前已经选中了文本已选中的状态不会立刻消失。这是正常现象下一次用户交互时选区会自动清空。写在最后copyOptions是个很实用的属性三行代码就能解决版权保护的问题。配合上两篇讲的事件监听可以构建非常灵活的剪贴板权限控制方案框架层兜底copyOptionsH5 层精细处理事件监听。
HarmonyOS ArkWeb 系列之从框架层锁死复制权限：copyOptions 详解
文章目录copyOptions 是什么完整代码示例HTML 页面用于测试三种模式的实际表现和 H5 层 user-select 的区别实际业务场景踩坑记录写在最后上两篇讲的都是 H5 层面的剪贴板操作。但有些场景下你需要的不是监听或修改而是直接在框架层禁止用户复制 Web 内容。比如付费阅读应用、版权保护场景、企业内部文件展示……用 H5 的user-select: noneCSS 并不可靠用户可以打开开发者工具绕过但通过 ArkTS 层的copyOptions属性来控制就彻底多了。copyOptions 是什么copyOptions是 Web 组件的一个 ArkTS 属性用来控制 Web 页面内容的复制行为。它接受的值来自CopyOptions枚举枚举值含义CopyOptions.None完全禁止复制——用户无法选中文本也无法复制CopyOptions.InApp只允许在应用内部复制不能粘贴到其他应用CopyOptions.LocalDevice允许在本设备范围内复制粘贴默认值CopyOptions.CROSS_DEVICE仅部分场景跨设备复制完整代码示例import{webview}fromkit.ArkWeb;EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();// 当前复制选项可通过按钮动态切换StatecopyOption:CopyOptionsCopyOptions.LocalDevice;build(){Column({space:12}){// 切换复制选项的按钮组Row({space:8}){Button(禁止复制).onClick((){this.copyOptionCopyOptions.None;})Button(仅应用内).onClick((){this.copyOptionCopyOptions.InApp;})Button(本设备).onClick((){this.copyOptionCopyOptions.LocalDevice;})}.padding(12)// Web 组件通过 .copyOptions() 绑定状态Web({src:$rawfile(copyOptions.html),controller:this.controller}).copyOptions(this.copyOption).width(100%).layoutWeight(1)}.height(100%).width(100%)}}注意State copyOption的用法——把copyOptions绑定到状态变量后切换按钮就能实时改变 Web 组件的复制权限不需要重新加载页面。HTML 页面用于测试!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0title复制选项测试/titlestylebody{padding:24px;font-size:16px;line-height:1.6;}.content-block{padding:16px;background:#f9f9f9;border-radius:8px;margin:12px 0;}/style/headbodyh2复制选项测试页面/h2divclasscontent-blockp这是一段版权内容请尝试选中并复制这段文字。/pp根据当前的 copyOptions 设置复制行为会有所不同/pulliCopyOptions.None完全无法选中文本/liliCopyOptions.InApp可以选中但只能在应用内粘贴/liliCopyOptions.LocalDevice正常复制粘贴默认/li/ul/div/body/html三种模式的实际表现和 H5 层 user-select 的区别很多人第一反应是用 CSS 的user-select: none来禁止复制body{user-select:none;-webkit-user-select:none;}这确实能阻止普通用户但有两个问题用户打开 DevTools 可以轻松去掉这个样式某些辅助功能工具屏幕阅读器等可以绕过它而CopyOptions.None是在框架层实现的Web 渲染引擎在底层就屏蔽了文本选择能力JS 也无法绕过。这个级别的保护比纯 CSS 方案强得多。实际业务场景付费阅读 App对免费内容用LocalDevice对付费内容用InApp甚至None防止用户复制后分发。企业内部文件查看器将文件内容渲染在 Web 组件里设置为InApp文件内容可以在应用内引用但不能直接粘贴到微信/邮件外传。合同/协议展示页设置为LocalDevice默认让用户可以正常复制协议条款方便他们查询和保存。踩坑记录坑CopyOptions.None 会影响可访问性设置为None后屏幕阅读器也无法正常选中页面内容。如果你的应用需要支持无障碍功能要谨慎使用None优先考虑InApp。坑动态切换 copyOptions 时已选中的文本不会立即取消选中如果用户在你切换到None之前已经选中了文本已选中的状态不会立刻消失。这是正常现象下一次用户交互时选区会自动清空。写在最后copyOptions是个很实用的属性三行代码就能解决版权保护的问题。配合上两篇讲的事件监听可以构建非常灵活的剪贴板权限控制方案框架层兜底copyOptionsH5 层精细处理事件监听。
