php 去除 m,去除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导航栏

$agent = $_SERVER['HTTP_USER_AGENT'];

if(strpos($agent,"Html5Plus") === false){//仅在非5+引擎环境下才显示导航栏

?>

web导航栏

}

?>

服务端隐藏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文件即可

/*5+ 引擎环境下自动隐藏无关元素*/

.html5plus .html5plus-hide {

display: none

}

if(navigator.userAgent.indexOf("Html5Plus") > -1) {

document.body.classList.add("html5plus");

}

web导航栏

即点即用、流式发行

点击下载

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

FAQ