整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多網頁都加入了一個雞賊的操作——「打開 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種彈窗提示信息，只有一個確認按鈕，只有提示的作用。有返回值，但返回結果一般不太重要。
alert的彈窗
第2種彈窗選擇按鈕，讓用戶選擇確定或取消，然后會進入到不同的處理步驟，需要有返回值。
第3種彈窗輸入內容，向用戶提問，并要求在彈窗中輸入文字，然后返回輸入的內容。
二、某些瀏覽器提供禁止模態彈窗功能，直接在瀏覽器設置中修改即可，甚至還可以自動返回值，使操作不因彈窗而中斷。
三、彈窗一般都是由javascript代碼產生的，在項目管理器中可以設置禁用javascript，這樣彈窗代碼將不會被執行了，不彈窗也不存在返回值，會影響所有javascript腳本執行。但它不會影響項目管理器中的javascript代碼執行。
四、自動檢測模態彈窗，并關閉彈窗。這種方法適用于所有的第三方程序窗口，可以控制瀏覽器以外的應用程序窗口。設定檢測頻率，按窗口標題識別彈窗，可以強制關閉彈窗或向彈窗發送鍵盤事件。使用這種方法時，彈窗最多存活一個檢測周期，往往一閃而過。
五、重載彈窗函數Alert，如下圖所示，不但可以阻止彈窗，還可以獲得彈窗顯示的內容。
六、重載confirm函數，如下圖所示，不但可以阻止彈窗，還可以直接選擇確定還是取消。
七、重載prompt函數，如下圖所示，不但可以阻止彈出輸入框，還可以把輸入的內容直接寫在代碼中。
是把彈窗的html都寫在了頁面app里邊。
圖1 點擊確認，隱藏彈窗
圖2 點擊取消隱藏彈窗 點擊確認執行其他操作
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;
},
}
})說明：
解決辦法如下：
第一步：在頭部加載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，加上以后別的瀏覽器就不好用了。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
