记一次WEB、移动端(安卓、IOS)h5页面禁止禁用复制、选中

背景

由于本人工作单位性质问题(新闻单位),元旦期间接到领导紧急要求将一篇文章禁止选中和复制,当我拿到需求的时候,原以为是很简单的几个件事处理即可解决问题,虽然本屌一直从事后端工作,但也觉得这种事情不在话下,随口答应1小时后即可上线。

当我说出这句话的时候,就很明显,事情没有这么简单。具体情况下如:

初次上线

我认为这种需求,简单的找个博客复制粘贴即可解决问题,紧急处理一篇文章嘛,领导也说了直接把ID写死即可,后期再安排做成配置。

<style type="text/css">
 	*{
        -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
        -webkit-user-select:none; /*webkit浏览器*/
        -khtml-user-select:none; /*早期浏览器*/
        -moz-user-select:none;/*火狐*/
        -ms-user-select:none; /*IE10*/
        user-select:none;
    }
</style>

那简单啊,我直接通过CSS样式禁止浏览器的选中弹窗事件,不就解决问题了。当我加好代码用自己的手机测试的时候 ,唉,好像没变化,随即,再找了一篇文章,我再加上几个操作事件处理,代码如下:

        <script type="application/javascript">
            //PC端 使右键和复制失效
            document.oncontextmenu = new Function("event.returnValue=false");
            document.onselectstart = new Function("event.returnValue=false");
            //ios
            document.oncontextmenu = function (e) {
                e.preventDefault();
            };
            document.onselectstart = function (e) {
                e.preventDefault();
            };
            //安卓
            document.addEventListener('contextmenu', function (e) {
                e.preventDefault();
            });
            document.ontouchend = function () {
                throw new Error("NO ERRPR:禁止长按弹出");
            }
            window.ontouchstart = function(e) {
                e.preventDefault();
            };
            document.body.addEventListener('touchstart', function () { });
            document.body.onbeforecopy = function () {
                window.getSelection().removeAllRanges();
            }
            document.body.oncopy = function () {
                window.getSelection().removeAllRanges();
                return false;
            }
        </script>

经过再次测试发现没有问题了,PC无法选中,也无法复制,拿下手机测试,长按也不再有任何弹窗,然后马上@运维同志安排上线。

当上线完成过后,通知群内其他同事一起测试,然后就爆炸了,大部分手机没有问题的,但发现有少量手机安装了QQ浏览器、百度浏览器的同志反应,依旧不生效。经过多次百度(都是国产浏览器的问题,找G哥也没用),发现网上也有少量的人也有反应此类问题,并未找到解决方案,本屌也尝试找了2个小时,也并未找到理想的解决方案。唉,放弃了。

寻求解决方案

后来寻问了前端同事,和一些做前端的大佬,都没有找到理想的解决方案。没办法,暂时放弃解决QQ浏览器和百度浏览器的问题。。如果有哪位大佬有解决方案,本屌万分感情。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐