去除M站DOM元素 - wap2app教程

屏蔽元素类型

在wap2app项目中，M站需要根据运行环境，判断当前是5+引擎时，做一些调整。

Tips： wap2app项目不管是打包成ipa/apk，还是发布成流应用，都依赖HTML5 PLUS引擎，简称5+引擎。

M站需调整的元素，主要包括几个方面：

1、客户端已有增强实现，屏蔽M站原有元素

比如顶部标题栏，wap2app已启用了原生标题栏，M站就无需再显示DIV的标题栏，否则会出现双标题栏的情况。

2、屏蔽明显wap化的DOM元素

比如：ICP备案、PC/mobile切换等

3、屏蔽原生下载信息

wap2app发布成原生apk/ipa或流应用，在手机用户眼里就是App，在App中出现App的下载链接是不科学的。同时流应用中默认也不支持下载apk或跳转到Appstore。

屏蔽方案

在5+引擎下，屏蔽M站元素的方案大致有两种：

服务端直接不生成对应DOM节点
服务端通过css隐藏对应DOM节点

服务端不生成对应DOM节点

如果M站的DOM是服务端渲染的，则可以在判断是5+引擎的环境下，不输出HTML的dom结构，这样即可减少网络传输的html大小，还可以避免wap化的展现形式。

Tips： 判断5+引擎的依据：navigator.userAgent含有“Html5Plus”字符串

如下为一段php示例代码，仅在非5+引擎环境下，才生成web导航栏

<?php  
    $agent = $_SERVER['HTTP_USER_AGENT'];  
    if(strpos($agent,"Html5Plus") === false){//仅在非5+引擎环境下才显示导航栏  
?>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">web导航栏</h1>  
    </header>  
<?php  
    }  
?>

服务端隐藏DOM节点

这里以原生下载引导为例，如果原生下载banner是客户端渲染的，则可以通过JS动态隐藏下载banner，如下为示例代码：

if(navigator.userAgent.indexOf("Html5Plus") > -1){  
    downloadEl.style.display = "none";//隐藏下载banner  
}

还有一种更为通用的方式：

探测当前为5+引擎，则在body节点上增加一个"html5plus"的class
将所有需要在5+引擎环境下隐藏的元素，均增加"html5plus-hide"的class

如下为示例代码，5+引擎环境下body节点上增加一个“ html5plus”的class

if(navigator.userAgent.indexOf("Html5Plus") > -1 ){  
    document.body.classList.add("html5plus");  
}

在通用css中增加增加一段代码：

.html5plus .html5plus-hide{  
    display:none  
}

这样，所有需要在5+引擎下需隐藏的元素，均在class中增加"html5plus-hide"，既不影响普通浏览器环境的显示，在5+引擎环境下也会自动隐藏。如下是一个简单的HTML示例代码，将js、css全部放在HTML页面中了，真实项目时，迁移到通用的js、css文件即可

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <style>  
            /*5+ 引擎环境下自动隐藏无关元素*/  
            .html5plus .html5plus-hide {  
                display: none  
            }  
        </style>  
    </head>  

    <body>  
        <script>  
            if(navigator.userAgent.indexOf("Html5Plus") > -1) {  
                document.body.classList.add("html5plus");  
            }  
        </script>  
        <!--页面标题，class增加html5plus-hide类-->  
        <header class="mui-bar mui-bar-nav html5plus-hide">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <h1 class="mui-title">web导航栏</h1>  
        </header>  
        <!--页面主题内容-->  
        <div class="mui-content"></div>  
        <!--下载引导，class增加html5plus-hide类-->  
        <footer class="mui-bar mui-bar-nav download html5plus-hide">  
            <div class="logo"><img src="" /></div>  
            <div class="text">即点即用、流式发行</div>  
            <div class="btn">点击下载</div>  
        </footer>  
    </body>  
</html>

Tips:有些M站可以通过url加一个参数实现不显示原生下载，此时推荐使用这种url