为了保护页面内容,很多页面都需要实现禁止用户复制剪切页面内容的操作,或者是为了强迫用户注册,登录之后才允许对页面内容进行复制剪切操作。
本篇文章武荣幸运快三计划 (iywbw.com)就教大家如何实现禁止用户在页面进行复制剪切操作的限制,以及如何去除该限制。
通过 JavaScript 实现
第一种方式,我们通过 JS 代码来禁用网页的复制事件、剪切事件、选择内容事件或者是右键菜单事件,来达到禁止用户复制页面内容的目的,代码如下:
// 禁止右键菜单 document.oncontextmenu = function(){ return false; }; // 禁止文字选择 document.onselectstart = function(){ return false; }; // 禁止复制 document.oncopy = function(){ return false; }; // 禁止剪切 document.oncut = function(){ return false; };
通过 HTML 实现
除了 JS 代码实现,也可以通过 HTML 标签属性实现,代码如下:
<body oncopy="return false" oncut="return false;" onselectstart="return false" oncontextmenu="return false"> <!--……--> </body>
该方法本质上与 JS 实现方式相同,都是通过设置事件来实现。
如果需要在用户进行某项操作之后将相应的限制进行去除,可以通过以下 JS 代码实现:
document.body.oncopy = null; document.body.oncut = null; document.body.onselectstart = null; document.body.oncontextmenu = null;
通过 CSS 实现
除了 JS 和 HTML 标签属性,我们也可以通过 CSS 样式来实现页面内容不可被选中的限制,从而间接达到不允许用户进行内容复制操作的目的,具体代码如下:
body { -moz-user-select:none; /* Firefox私有属性 */ -webkit-user-select:none; /* WebKit内核私有属性 */ -ms-user-select:none; /* IE私有属性(IE10及以后) */ -khtml-user-select:none; /* KHTML内核私有属性 */ -o-user-select:none; /* Opera私有属性 */ user-select:none; /* CSS3属性 */ }
总结
限制用户对页面内容进行复制,实现思路就是通过事件或样式控制,来禁止右键菜单、内容选择以及复制剪切操作。
上一篇:百度竞价推广怎么样才有效果?
下一篇:没有备案的网站会收录吗?