【已解决】网页内容无法选择、复制

一、问题出现背景：

• 文章的文字无法选择，右键也是失效的，但是可以点击链接和图片（图中是一个下载图片的浏览器插件）

二、可能原因及尝试过程：

• 很可能是代码做了限制，开始以为是js限制选择（动态限制选择，但想想是不太可能的，因为没有选中又取消的现象），后来找到文章可能是css属性限制。
• 文章有些网页的文字不能选中粘贴,请问怎么处理?，是另存为文件打开复制，仍然不行
• 文章css设置页面文字不能被选中和页面文字无法选中？是css属性限制，但使用Ctrl+F找到select的css样式全部删掉后还是不能选择。

.cannotselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

• 找到一篇全面的文章分分钟破解网页不能复制的文字轻松搞定(做自媒体必懂的干货)：看上去都差不多，最后一条没注意因为不够熟悉（有个单词写错了没引起共鸣）；还有就是在Elements差不多把元素删完了还是不行，如下红体不准选择的属性在Elements删除也是没用的，还得另存为文件删除才有效。

  • 第一招：点击浏览器的“工具”—“internet选项”—“安全”—“自定义级别”，然后将脚本全部禁用，安F5刷新一下网页。这时候你就会发现之前不能复制的内容，现在都没有问题了！（提示：复制完想要的东西之后，记得把禁用的脚本解禁，否则会影响正常浏览的）

  • 第二招：这招说其实是最简单，但有时最麻烦的一招。直接右击然后“查看源文件”，在源文件代码中复制需要的文章。不过复制文章的时候会有很多用不着的符号和代码。有一点点的麻烦。

  • 第三招：点击浏览器的“文件”菜单栏，选择“保存网页”然后点开保存的文件，下载下来想要的网页，然后用word文本打开就可以了！这个和第二招一样，但是可以保存为.html网页文件，用浏览器打开。

  • 第四招：打开想要下载的网页，然后把该网页另存到电脑上面，接着用记事本打开的方法打开！在记事本中找到（οnpaste=“reture flase”不准粘贴 οncοpy=“reture flase；”不准复制 oncut=“reture flase；”不准剪切 onselectstart=“reture flase”不准选择）这句语句或者类似的代码，然后把这句代码去掉，body模块中的除外，然后保存记事本。接着双击打开刚才保存的记事本，这时候出现的文章就是可以复制的文章了。

• 文章网页上的文本无法复制？一个代码即可帮你突破限制，秒学！是用代码 javascript:void($={}); 解决360图书馆需要会员才能复制的问题（注意粘贴时到地址栏时 javascript: 是没有的，需要手动加上），解决不了此问题。模拟下面的解决方法使用 javascript:void($={document.body.onselectstart='return true';})没反应，后来尝试javascript:void($={alert('dddd');})也是没有反应，所以这个写法可能有问题（待验证）。

• 刚刚发布文章就看到解决网页内容不允许复制的方法：将该段javascript代码复制，粘到地址栏，按回车，内容即可复制。（注意地址栏会将 Javascript: 略去，需要手动添加哦）

javascript:document.οncοntextmenu='return true';document.onselectstart='return true';document.body.onselectstart='return true';document.body.οnselect='return true';document.body.οncοpy='return true';document.body.onbeforecopy='return true';document.body.οncοntextmenu='return true';document.body.οnmοuseup='return true';void 0;

• 还有这些：思路+实战！破解网页内容无法复制及其转载、h5设置网页不能选中，复制等操作，防被趴！

三、最终解决：

• 如上第四招，另存为网页.html文件，然后找到 onselectstart="return false" 删掉就可以实现选择了（注意直接在Elements删除是没有用的）
• 在地址栏输入 javascript:document.body.onselectstart='return true';void; 回车就可以了（注意地址栏 javascript: 会自动省去需要手动加上，有两个办法：一个前头加一个字母复制粘贴后删除即可，另一个还是手动添加），注意 void; 不可缺少，不然就会跳转。
• 由此还有一个办法就是在console中输入 document.body.onselectstart='return true' 也是可以的，需要了解的可以去搜索onselectstart 和 onselect
• 还有一个便捷的办法是将下面代码复制到收藏页中：名称自定义，网址为 javascript: 开头的代码（如果多行请在后面的代码外框上快速执行函数或函数及其函数调用），比如收藏这个或收藏这个。发布后发现这个无法打开（javascript:后面的会被省略，估计是当脚本被处理了），请复制下面代码，就是倒数第二点的代码，没用。

• 因为对于这种博客文章是无用的，所以需要设置样式（建议用上面的，实在不行再用这个更直接繁琐的）。

//解决页面无法选择的问题
javascript:document.getElementsByTagName("body")[0].setAttribute("onselectstart", "return true;")
//解决页面无法选择（所有）--用浏览器工具“开发工具箱”或者js在线工具压缩为一行代码
javascript:(function(){
    var tagNames = document.getElementsByTagName("*");
    //console.log(tagNames);
    for(var i = 0; i < tagNames.length; i++) {//for(var i in tagNames){//此i的范围不小于tagNames.length
        //console.log(tagNames[i]);//如上发现这个报错（i大于tagNames.length）
        tagNames[i].setAttribute("onselectstart", "return true");
        tagNames[i].setAttribute("style", tagNames[i].getAttribute("style") + "-webkit-touch-callout: text;/*系统默认菜单被禁用*/-webkit-user-select: text;/*webkit浏览器*/-khtml-user-select: text;/*早期浏览器*/-moz-user-select: text;/*火狐*/moz-user-select: -moz-text;/*火狐*/-ms-user-select: text;/*IE10*/-o-user-select:text;/*欧朋*/user-select: text;");
})()
//一行代码
javascript:(function(){var tagNames = document.getElementsByTagName("*");for(var i = 0; i < tagNames.length; i++) {tagNames[i].setAttribute("onselectstart", "return true");tagNames[i].setAttribute("style", tagNames[i].getAttribute("style") + "-webkit-touch-callout: text;/*系统默认菜单被禁用*/-webkit-user-select: text;/*webkit浏览器*/-khtml-user-select: text;/*早期浏览器*/-moz-user-select: text;/*火狐*/moz-user-select: -moz-text;/*火狐*/-ms-user-select: text;/*IE10*/-o-user-select:text;/*欧朋*/user-select: text;");}})()

备注： 本文主要是借助博客环境，同大家讨论异常问题解决的办法，欢迎大家评论，谢谢！