JavaScript复制页面内容的三种方案-猿码集

1. 复制页面内容

在前端开发过程中，有时需要实现复制页面中的某一内容的功能，例如复制一段文本或者图片等。下面我们就来介绍一下 JavaScript 实现复制页面内容的三种方案。

2. 方案一：document.execCommand()

2.1 概述

在早期的浏览器中，document.execCommand()是常用的复制页面元素的方法。该方法为执行命令，可以执行浏览器自带的一些操作，包括“复制”、“粘贴”等功能。

2.2 代码


function copyContent(elementId) {
  var element = document.getElementById(elementId);
  var range = document.createRange();
  range.selectNode(element);
  window.getSelection().addRange(range);
  document.execCommand("copy");
}

2.3 说明

以上代码会获取一个元素的 id，以及该元素的内容。然后通过document.createRange()方法创建一个范围，并把范围设置为该元素，最后利用document.execCommand()方法执行复制功能。

2.4 局限性

尽管document.execCommand()方法看起来很好用，但实际上它只适用于早期的浏览器，且只适用于文本类型。同时，如果调用该方法时，用户未选择任何内容，则不会进行复制操作。

3. 方案二：复制插件

3.1 概述

为了克服document.execCommand()方法的局限性，一些复制插件如clipboard.js、zeroclipboard等应运而生。这些插件能够兼容大多数浏览器，并且目前被广泛使用。

3.2 代码


<!-- 引入 clipboard.min.js 文件 -->
<script src="clipboard.min.js"></script>
<script>
  function copyContent(elementId) {
    var element = document.getElementById(elementId);
    var clipboard = new Clipboard(element, {
        text: function() {
            return element[xss_clean];
        }
    });
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
  }
</script>

3.3 说明

以上代码会引入clipboard.min.js文件，并声明一个clipboard对象，该对象会在元素被点击时复制该元素中的内容。需要注意的是，clipboard对象需传入两个参数：

第一个参数为一个 DOM 元素，代表可复制的区域。

第二个参数为一个 Object，其中text为函数类型，返回需要复制的内容。

4. 方案三：原生API

4.1 概述

近年来，随着 HTML5 API 不断完善，现在已有原生的API可以在支持的浏览器中复制文本、图片等内容。

4.2 代码


function copyContent(elementId) {
  var element = document.getElementById(elementId);
  var range = document.createRange();
  range.selectNode(element);
  window.getSelection().addRange(range);
  try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copy command was ' + msg);
  } catch (err) {
      console.log('Oops,unable to copy');
  }
  window.getSelection().removeAllRanges();
}

4.3 说明

以上代码会创建一个范围，并将其设置为指定元素。然后，调用document.execCommand('copy')方法复制该范围的内容。最后移除该范围并返回指定的状态信息。

5. 总结

通过本文的介绍，我们了解了当前主流的三种 JS 复制页面内容的方案。其中，document.execCommand()方法虽具有局限，但在兼容旧式浏览器时仍有价值；复制插件则通过克服早期方式的局限，能够复制更多类型的内容；而 HTML5 API 则提供了原生的复制方法。因此，在实现时可基于需要进行选择。

JavaScript复制页面内容的三种方案