首页 > Web开发 > 详细

关于禁止复制网页内容应该做的兼容

时间:2019-03-29 17:55:45      阅读:134      评论:0      收藏:0      [点我收藏+]

关于禁止复制内容我们用得最多的应该就是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脚本都写上才能解决这些问题。

 

 

关于禁止复制网页内容应该做的兼容

原文:https://www.cnblogs.com/hermit-gyqy/p/10622713.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!