js如何在微信的内置浏览器中实现复制内容到手机剪贴板

一、js如何在微信的内置浏览器中实现复制内容到手机剪贴板

1、在处理项目时，遇到了在微信内置浏览器中使用 navigator.clipboard写入内容到手机剪贴板的难题。在PC端测试时，通过 navigator.clipboard.writeText可以成功实现，但在微信中，尽管 navigator.clipboard存在，writeText时却显示拒绝，因为微信出于安全考虑关闭了此权限。尝试使用替代方法如 document.execCommand('copy')也不可行。

2、考虑到直接复制和粘贴需求，最初考虑过使用截图方式解决，但甲方测试后发现容易混淆字母与数字（如o与0，I与1），此方案被放弃。为了寻找更合适的解决方法，找到了clipboard.js，并通过GitHub下载该库并参考官方文档进行实践。

3、首先，官网演示确认了在微信浏览器中，使用clipboard.js可以正常进行复制和粘贴操作。接着，按照官方说明在本地进行调用。调用clipboard.js主要通过指定目标元素并初始化ClipboardJS类实现。

4、具体实现时，使用按钮（通过class="btn"指定）作为执行复制操作的触发点，并通过属性值data-clipboard-target指定复制目标元素（如input或textarea）的ID。此外，还可以通过data-clipboard-text属性直接指定复制内容，操作较为便捷。

5、然而，在项目中应用此方案时遇到了一些限制。由于界面UI通过weui.js输出，无法对显示内容或按钮进行自定义，多次尝试未达到预期效果。查阅文档后，在advanced usage部分发现了一个可以动态指定复制目标的选项，使得实现更加灵活。

6、通过在初始化ClipboardJS时，除了指定操作按钮，添加动态目标指定功能，可以使用函数直接返回任意目标元素的内容，并通过两个链式监听结果来实现复制操作。经过测试，这一方法成功解决了问题。尽管官方文档中对第二个选项的说明较少，但通过分享个人经验，希望能为遇到相同问题的开发者提供参考。

二、怎样获取div内的HTML代码并将其复制到剪贴板

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。

＜!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"""＞

＜html xmlns=""＞

＜title＞单行文字实现垂直居中＜/title＞

＜meta http-equiv="Content-Type" content="text/html; charset=utf-8"/＞

body{ font-size:12px;font-family:tahoma;}

＜div＞现在我们要使这段文字垂直居中显示！＜/div＞

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把＜div＞完全填充的一种访求而已。可以使用类似下面的代码：

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

＜!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"""＞

＜html xmlns=""＞

＜title＞多行文字实现垂直居中＜/title＞

＜meta http-equiv="Content-Type" content="text/html; charset=utf-8"/＞

body{ font-size:12px;font-family:tahoma;}

＜div＞＜pre＞现在我们要使这段文字垂直居中显示！

三、点击复制代码

我这里也不提示复制成功，但是确实是复制上了！试试下面两个吧，我这里是可以的

<title>标题</title>

<input type="button" name="Submit" onClick='copyToClipBoard()' value="复制专题地址，传给QQ/MSN上的好友">

<script language="javascript">

clipBoardContent+=document.title;

clipBoardContent+=this.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");

2.点击复制标题和网址并提示复制的内容

var clipBoardContent=document.title;

clipBoardContent+='\r\n'+ document.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友！\r\n\r\n内容如下：\r\n"+

<INPUT title=点击复制标题和地址,发送祝福给MSN/QQ/UC上好友. onclick=copyToClipBoard() type=button value=点击复制本页地址，传给祝福给QQ/MSN上的好友>