多网页都加入了一个鸡贼的操作——「打开 App 阅读全文」。

明明可以一次性把内容展示出来，非得给你隐藏一半，剩下一半需要下载 App 才能看。

要不是隔着一条网线，这种话说到一半的人，真的，应该拖出去揍一顿。

不过好在有关部门已经开始行动了：高度重视，敦促相关企业进行整改。

话音刚落，确实已经有一些网页进行了优化，看新闻查资料什么的顺畅多了。

但是吼，不排除某些厂商比较顽固，不愿意放弃这块蛋糕，想方设法让用户下载 App。

之前说到这个问题的时候，也有不少小伙伴表示需要一些解决方案。

作为一个有求必应的数码博主，这就给大伙支两招。

Safari 扩展

如果你是 iPhone 用户，那这个问题就太好解决了。

因为在 iOS 15 中，苹果已经为内置浏览器 Safari 加入了扩展功能。

通过这些扩展，我们可以实现很多浏览器本身不支持的操作，解决展开全文问题可谓信手拈来。

目前，应用商店已经有很多扩展都可以实现这个功能，比如「拦截 100」。

操作步骤非常简单，看好了。

第一步：在 APP Store 搜索「拦截 100」，安装。

第二步：在系统设置里找到「Safari 浏览器」，然后点击「扩展」，开启「拦截 100」并「允许所有网站」。

这样就算设置好啦。

效果看下图：同一个网页，左边是关闭扩展，右边是打开扩展。

网页浏览瞬间香了起来有木有！

而且吼，「拦截 100」的三个核心功能是免费的：自动展开全文、拦截跳转 App、去除网页 App 横幅广告。

（免费使用）

如果你愿意氪金，还可以解锁脚本、深度去广告等功能，大家根据自己的需求来就好。

（15 元一年，30 元买断，其实也不算很贵）

除了「拦截 100」，App Store 还有很多扩展都已经支持自动展开全文，大家可以挑一个自己喜欢的。

对了，想浏览所有 Safari 扩展，可以从 App Store 中的「App」-「热门类别」-「Safari 浏览器扩展」进入哦~

安卓这边，目前还没有主流的浏览器支持扩展插件。

毕竟系统层面还不支持，所以很难形成气候。

但是，咱们也可以通过一些小众浏览器的脚本功能，实现类似操作，比如 Via 浏览器。

浏览器脚本

与很多主流浏览器不同，Via 浏览器内置了脚本功能，可以借助 JavaScript 代码实现扩展操作。

但问题来了，这玩意咱也不会写呀，怎么办呢？

高手在民间，一些开发者自发地贡献了脚本，甚至还做了网站，实现一键安装。

用户唯一需要做的，就是点击安装。

看下效果，左侧是安装前，一打开网页就提示跳转；右侧是安装后，无需点击即可拉到结尾。

不过，由于这些浏览器和脚本都比较小众，也缺乏有组织的维护，So...可能出现覆盖不全、失效等情况。

比如说在百度经验自动展开全文时，就遇到了显示 Bug，正文还没完就直接显示广告了。

不管怎么说，这些方法都只能从表面上解决问题。

想要完全杜绝，依旧得看这些互联网大厂。

先来了解一下什么是模态弹窗？

模态弹窗会打断用户的操作行为，强制用户必须进行操作，否则不可以进行其他操作。看看模态弹窗都长啥样吧！

一、常见的网页模态弹窗

第1种弹窗提示信息，只有一个确认按钮，只有提示的作用。有返回值，但返回结果一般不太重要。

第2种弹窗选择按钮，让用户选择确定或取消，然后会进入到不同的处理步骤，需要有返回值。

第3种弹窗输入内容，向用户提问，并要求在弹窗中输入文字，然后返回输入的内容。

二、某些浏览器提供禁止模态弹窗功能，直接在浏览器设置中修改即可，甚至还可以自动返回值，使操作不因弹窗而中断。

三、弹窗一般都是由javascript代码产生的，在项目管理器中可以设置禁用javascript，这样弹窗代码将不会被执行了，不弹窗也不存在返回值，会影响所有javascript脚本执行。但它不会影响项目管理器中的javascript代码执行。

四、自动检测模态弹窗，并关闭弹窗。这种方法适用于所有的第三方程序窗口，可以控制浏览器以外的应用程序窗口。设定检测频率，按窗口标题识别弹窗，可以强制关闭弹窗或向弹窗发送键盘事件。使用这种方法时，弹窗最多存活一个检测周期，往往一闪而过。

五、重载弹窗函数Alert，如下图所示，不但可以阻止弹窗，还可以获得弹窗显示的内容。

六、重载confirm函数，如下图所示，不但可以阻止弹窗，还可以直接选择确定还是取消。

七、重载prompt函数，如下图所示，不但可以阻止弹出输入框，还可以把输入的内容直接写在代码中。

是把弹窗的html都写在了页面app里边。

1、html代码

<div class="layui-body"  id="app">
  <div  ><button  @click="queren">显示确认框</button><button  @click="qshanchu">显示删除框</button></div>
  <div class='zzc none'  :class="{'nonone':showzzc==1}">
  <div class='confir' v-show="showts==1">
    <h3>温馨提示</h3>
	<p>确认要删除吗？</p>
	<div class='del-btn-item'>
	  <dl>
	    <dd>
		  <button type='button' class='confire_btn_no'   @click="hidetc">取消</button>
		  <button type='button' class='confire_btn_yes' @click="isdelc">确认</button>
	    </dd>
	  </dl>
    </div>
  </div>
  <div class='confir' v-show="showts==2">
    <h3>温馨提示</h3>
    <p>{{tis}}</p>
    <div class='del-btn-item'>
      <dl>
	    <dd>
		  <button type='button' class='confire_btn_yes_full confire_btn_yes' @click="hidetc">确认</button>
	    </dd>
	  </dl>
    </div>
  </div>
</div>
</div>

2、css代码

.zzc{position:fixed;width:100%;height:100%;z-index:111111;background-color:rgba(221,221,221,0.7);left:0;top:0;}
.zzc .confir{position:fixed;border:2px solid #009688;z-index:222222;background: #FFF;left:50%;top:50%;border-radius:5px;width:350px;height:200px;margin-left:-175px;margin-top:-100px;}
.zzc .confir h3{width:100%;text-indent:10px;font-size:16px;height:40px;line-height:40px;border-bottom:1px solid #DDD;}
.confir  p{background:url(../images/icon_exc_small.gif)  no-repeat 30px center;height:80px;line-height:80px;display:block;width:100%;text-indent:120px;font-size:16px;}
.confir  button{font-size:14px;padding:10px 30px;margin:0 5px;border:0;cursor:pointer;}
.confir  .confire_btn_no{background:#F2F2F2;}
.confir  .confire_btn_yes{background:#009688;color:#FFF;}
.confir  .del-btn-item{margin-top:20px;}
.confir  .del-btn-item dd{text-align:center;}
.confir  .confire_btn_yes_full{width:calc(100% - 60px);margin:0 auto;}
.none{display:none;}
.nonone{display:block !important}

使用rgba直接设置background-color透明度，background-color:rgba(221,221,221,0.7)，0.7即为透明度

3、js代码

 new Vue({
    el: '#app',
    data(){
		return {
		  tis:'',           //提示内容
		  showzzc:0,         //弹出框的显示，隐藏 。0 隐藏  1显示
		  showts:0,          //1 弹出提示操作框  2 弹出提示确认框 
		 }
    },
    methods:{
    	  hidetc:function(){
		        this.showzzc=0;
	      },
        isdelc:function(){
			    //这里是删除的操作
			    this.showzzc=0;//赋值为0， 隐藏弹出框
	      },
	      queren:function(){
		      this.showzzc=1;
		      this.showts=2;
		      this.tis="你点击了显示确认框";
	      },

	      qshanchu:function(){
		      this.showzzc=1;
		      this.showts=1;
	      },
    }
  })

说明：

1. 在1中可以看到 使用的<div class='zzc none' :class="{'nonone':showzzc==1}"> 操作的是class ，而不是使用v-if 或者v-show，这是因为vue是在最后渲染，如果不加none，打开页面的时候，窗口有一个闪现的过程，这很明显不是我们想要的效果，如果加上none，v-if，v-show 就失去了作用；
2. nonone 加上!important ，优先级高于none，让class='none'，失去了作用，达到我们想要的显示隐藏的效果；
3. 弹窗可能提示的内容不同，提示的信息直接读取基础数据tis的信息，例如：上传图片，可能会提示大小超出，格式不对；
4. 360急速浏览器在兼容模式下，vue都失效，没有解析；

解决办法如下：

第一步：在头部加载browser.min.js，

第二步：判断浏览器是否为ie浏览器

第三步：如果是ie，在vue的<script>处加上type="text/babel"

完整代码：

<script  type="text/javascript" >
     if (!!window.ActiveXObject || "ActiveXObject" in window){
		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" type=\"text/babel\"></s"+"cript>");
     }else{
		 document.write("<scri"+"pt src=\"/public/admin/js/art.js\" ></s"+"cript>");
	 }
</script>

我的vue的代码写在了art.js，主要就是判断是否ie，然后决定是否加上 type="text/babel"，如果不是ie，加上以后别的浏览器就不好用了。