美文网首页前端实用技巧
H5移动端页面禁止复制技巧

H5移动端页面禁止复制技巧

作者: 猪大圣三七 | 来源:发表于2020-05-07 10:37 被阅读0次
前言:业务需要,需要对整个页面禁止弹出复制菜单。
在禁止的页面中加入以下css样式定义

* {
       -webkit-touch-callout:none;/*系统默认菜单被禁用*/

      -webkit-user-select:none;/*webkit浏览器*/

      -khtml-user-select:none;/*早起浏览器*/

      -moz-user-select:none;/*火狐浏览器*/

      -ms-user-select:none;/*IE浏览器*/

       user-select:none;/*用户是否能够选中文本*/

    }

还需加入以下JS

<script language="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:禁止长按弹出");
    }
</script>
实测 IOS禁止呼出复制菜单有效。但在安卓上还无法全部禁止。

安卓UC浏览器上还需加入以下代码,可以禁止长按呼出菜单:

<meta name="browsermode" content="application"/>

安卓QQ浏览器暂时没有找到禁止呼出复制菜单的方法.

相关文章

  • H5移动端页面禁止复制技巧

    前言:业务需要,需要对整个页面禁止弹出复制菜单。 在禁止的页面中加入以下css样式定义 还需加入以下JS 实测 I...

  • 移动端资源整理H5

    移动端资源的整理 meta标签 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号...

  • 移动端开启页面滚动和禁止页面滚动@令狐张豪

    移动端开启页面滚动和禁止页面滚动@令狐张豪 在做移动端的时候我们经常要禁止页面的滚动和开启页面的滚动,故学习了下原...

  • H5项目常见问题及注意事项

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 常见问题:移动端如何定义字体font-fa...

  • Web前端のH5页面开发技巧

    meta标签相关知识 移动端页面视口设置 针对ios优化 禁止设备识别 缓存处理 样式处理技巧 -webkit-...

  • 移动端web页面适配

    移动端Web页面,即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一,在做移动端的Web页面...

  • meta设置

    移动端页面设置视口宽度等于设备宽度,并禁止缩放。 移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用...

  • 用心打造企业营销产品

    H5游戏开发 H5是一系列制作网页互动效果的技术集合,即H5就是移动端的web页面。而H5游戏,你可以看作是移动端...

  • 移动端禁止页面滑动

    移动端禁止页面滑动 场景是这样滴~一般H5活动 达到某一条件弹出提示 往往是遮罩层 用户在遮罩层上只能进行指定的操...

  • 移动端页面禁止缩放

网友评论

    本文标题:H5移动端页面禁止复制技巧

    本文链接:https://www.haomeiwen.com/subject/qusoghtx.html