关于禁止复制内容我们用得最多的应该就是user-select:none;这个属性了,

但是这个属性还不够完美,因为它不是所有浏览器都支持的属性,

像ie6,ie7,ie8,ie9都不支持这个属性,不过它在Chrome和Safari上能完美的支持。

这样,我们就需要做一些兼容了

首先使用 user-select:none;

 

如:.box{  

            -webkit-user-select:none;
           -moz-user-select:none;
           -o-user-select:none;
        user-select:none;

}

但是这样还不够,因为ie6-9不兼容,所以还得加上标签属性 onselectstart="return false;" 来达到 user-select:none 的效果

用法:<body onselectstart="return false"> 

但是这样还是不够好,假如我只是想某一个部分不能复制,那么我们可以通过css的方式来解决,

如:.box{gn:expression_r(this.onselectstart=function(){return false;})} 

这样针对IE浏览器的兼容就可以了,但是这样还是不够完美,因为还会有很多奇怪的原因导致某些浏览器不生效,

所以我们使用一个脚本来控制它,

 

          <script type="text/javascript">

                                document.oncontextmenu=new Function('event.returnValue=false;');
                                document.onselectstart=new Function('event.returnValue=false;');

</script>

这样就可以控制了,但是这个脚本也是有缺点的,因为它不支持火狐浏览器,

所以我们在开发的时候需要把css属性、标签属性和js脚本都写上才能解决这些问题。

 

 

posted on 2019-03-29 17:28  归隐情缘  阅读(196)  评论(0编辑  收藏  举报