最近在做DHTMLX框架替換,新框架dhx的grid是不能選中內容復制的
雖然相對來說是安全些的,但是客戶體驗度一定會大打折扣
網頁上禁止復制主要靠JavaScript來實現。
<BODY oncontextmenu="return false" onselectstart="return false"
ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()>
防止復制的js
<SCRIPT language=JavaScript1.2>
function disableselect(e){
return false}
function reEnable(){return true
}
file://if IE4+
document.onselectstart=new Function ("return false")
file://if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</SCRIPT>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</SCRIPT>
防止下載的js
<noscript><iframe src=""></iframe></noscript>
等等
然而,這套框架用的css屬性來禁止的
代碼如下:
-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;
語法:
user-select:none | text | all | element
默認值:text
適用於:除替換元素外的所有元素
繼承性:無
動畫性:否
計算值:指定值
取值:
- none:文本不能被選擇
- text:可以選擇文本
- all:當所有內容作為一個整體時可以被選擇。如果雙擊或者在上下文上點擊子元素,那么被選擇的部分將是以該子元素向上回溯的最高祖先元素。
- element:可以選擇文本,但選擇范圍受元素邊界的約束
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>user-select_示例</title> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 8 <style> 9 .test{padding:10px;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;background:#eee;} 10 </style> 11 </head> 12 <body> 13 <div class="test" onselectstart="return false;" unselectable="on">選擇我試試,你會發現怎么也選擇不到我,哈哈哈哈</div> 14 </body> 15 </html>