如何批量复制网页内容,如何复制网页全部内容

首页>实用技巧>作者:YD1662023-07-30 20:31:03

写在前面

在IM聊天对话窗口、网页代码编译器或代码块展示等场景中,为了方便用户快速获取内容,往往会提供一个“一键复制”的功能。


比如知音楼右键消息的复制/网页编译器代码内容右键的复制/某论坛对于代码的一键复制按钮:

如何批量复制网页内容,如何复制网页全部内容(1)

目前Web API提供过两种方法,支持js复制网页中目标内容(操作剪贴板),有先进的有即将废弃的。由于比较新的方法容易引起兼容性问题,所以旧方法濒临废弃但不能完全舍弃。

下面将会详细介绍一下这两种方法,并分别针对文本复制和图片复制,详细介绍我经多次尝试总结的兼容性方法。

API梳理

navigator.clipboard.write系列

相关MDN外链地址

https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard_API

(请复制链接到浏览器中打开)

兼容性

如何批量复制网页内容,如何复制网页全部内容(2)

上图可观,在较新浏览器版本下,仅火狐的安卓端完全不支持Clipboard API提供的写入方法。但要注意的是,由于这两个方法涉及用户权限获取,一些客户端提供的WebView通常会直接禁掉对它们的使用,这种情况虽与浏览器的版本关系不大,但这些方法也无法正常使用。

使用方式

如何批量复制网页内容,如何复制网页全部内容(3)

Clipboard API提供了两种将不同类型的内容写入剪贴板的方法:

writeText()

如何批量复制网页内容,如何复制网页全部内容(4)

首页 1 2 3 4 下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 m.360kss.com., All Rights Reserved.