禁止复制的新思路,css 禁止选择

主题插件和高阶开发, 优选
浏览次数 344

网站的内容不允许复制,有什么办法解决吗

当我们需要复制,一般是先选中,然后右键复制。

之前的思路一般在通过JS来禁止右键或者禁止复制,如下,

<script language="JavaScript">
//禁止页面选择以及鼠标右键
document.οncοntextmenu=function(){return false;}; 
document.onselectstart=function(){return false;};
let h = window.innerHeight;
let w = window.innerWidth;

//禁用右键
document.oncontextmenu = function () { return false; };

//在本网页的任何键盘敲击事件都是无效操作 (防止F12和shift+ctrl+i调起开发者工具) 
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}

//禁用开发者工具F12
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
};

//如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面 
window.onresize = function () {
if (h != window.innerHeight || w != window.innerWidth) {
window.close();
window.location = "about:blank";
}
}
</script>

今天发现了一种新奇的方式,就是简单通过禁止CSS选择。如下。

body {
-moz-user-select: -moz-none; 
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

要想复制内容,需要在开发者工具中找到body输入 user-select: auto !important; 如果频繁使用,可以使用扩展。

在Chrome web store 中,搜索添加Live Css Editor,添加以下代码,即可不用每次调用开发者工具,方便复制粘贴。

body{
user-select: auto !important;
}
我们将在15分钟内联系你

免费提供行业网站方案以及海外推广计划

菜单