<track id="lixs8"></track>
<bdo id="lixs8"><tr id="lixs8"><samp id="lixs8"></samp></tr></bdo>

<ins id="lixs8"><big id="lixs8"><button id="lixs8"></button></big></ins><b id="lixs8"><pre id="lixs8"></pre></b>

  1. 舊版 IE 升級提示彈窗代碼

    此代碼是 舊版 Internet Explorer 淘汰行動 一部分,如需查看項目介紹請點擊鏈接查看,本頁只介紹彈窗代碼。

    彈窗代碼的由來

    2014年8月,舊版IE淘汰行動初上線時,僅提供升級提示頁跳轉代碼,設計思路來自微軟官網。采用頁面跳轉方式本意是,網站在不支持的舊版IE中往往是錯版,因此可以直接跳轉至升級提示頁,避免加載無用的資源的同時在第一時間告訴用戶該升級瀏覽器了。

    但升級提示頁并未能滿足所有實際場景。例如,有的網站以文字內容為主,盡管在舊版IE中網站排版出現錯位,卻不影響文字內容的展現。因此有的網站主希望只提示用戶進行瀏覽器升級,是否升級由用戶決定,用戶選擇忽略升級提示也能繼續訪問錯版的網頁。

    于是,舊版IE淘汰行動新增舊版IE升級提示彈窗代碼,以適應更多場景。

    彈窗代碼的特性

    彈窗代碼最大的特性莫過于不跳出原有網頁,直接在當前網頁展示,用戶可以選擇關閉彈窗繼續瀏覽網頁內容。在代碼配置方面,可以決定用戶關閉彈窗后多少分鐘內不再出現。此外,通過 if IE 以及 @cc_on 語句的配合,彈窗代碼將只再需要進行升級提示的IE版本中加載,其他瀏覽器不加載。

    關于彈窗的設計

    實際上,舊版IE升級提示彈窗的代碼在網上并不少見,大部分是采用頭部橫幅一句話提示,小部分一張大圖加一段簡要文字提示,對小白用戶并不友好。至今仍使用舊版IE瀏覽器的用戶,除了極少數專業人士,剩下的都是小白。專業人士使用舊版IE往往是出于實際需要(例如測試),無論你如何提示他們都不會升級;而小白用戶則往往是因為不懂電腦,因此提示語不能無足輕重,否則無法說服他們升級,也不能只使用術語,否則小白看不懂。

    因此,本彈窗的設計定位針對小白用戶,主配色采用黃、白,整體偏暖,大標題采用深紅色并配以加粗的“危險!”、“請立即升級!”等警示字樣,營造一種需要立即升級的迫切感,引導用戶盡快完成升級到新版瀏覽器。另,特別為使用國產雙核瀏覽器IE兼容模式的用戶提供切換至極速內核的示意圖,引導用戶通過切換內核來正常訪問網頁,在避免流量流失的同時為用戶提供最好的訪問體驗。查看彈窗截圖

    彈窗代碼

    了解 if IE 和 @cc_on 語句

    if IE 是IE瀏覽器特有的條件注釋語句,語法如 <!--[if lte IE 9]><![endif]-->,用于判斷IE版本,只在IE9及更舊版IE有效,在IE10、IE11或其他瀏覽器會被當作普通注釋忽略;@cc_on 是IE瀏覽器特有的條件編譯語句,語法如 /*@cc_on @*/,只在IE10及更舊版本IE有效,在IE11或其他瀏覽器會被當作普通注釋忽略。彈窗代碼將根據不同情況使用這兩種特性,以實現代碼只在需要進行升級提示的IE版本中加載,其他瀏覽器不加載。

    關于雙核瀏覽器的兼容問題

    請在 <head> 后彈窗代碼前添加如下代碼,有了如下代碼,內置 Chromium 和 IE 雙核的瀏覽器會優先使用 Chromium 內核,IE也會優先使用最高內核,而非兼容模式。詳細解釋請參閱 舊版 Internet Explorer 淘汰行動 的代碼解釋。

    需要注意的是,以下規定內核的代碼并非總是有效,當你的域名是 gov.cn 或 edu.cn 結尾時,或當你的網頁內容存在類似“IE9.0或以上瀏覽器訪問達到最佳效果”的提示時,此代碼將失效。

    不過,正如前文所述,彈窗代碼為雙核瀏覽器用戶提供了切換內核示意圖,引導用戶通過切換內核正常訪問。查看效果截圖

    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    可選配置

    彈窗代碼提供兩個參數可供配置。一是決定用戶關閉彈窗后多少分鐘不再展示彈窗的 once 參數,不配置將不限制,用戶每次打開或刷新頁面都展示一次;二是決定從哪個IE版本開始提示升級的 outver 參數,最高是11(即所有IE都提示升級),最低是6,默認是10(即IE10及以下都提示升級)。

    示例〇。所有IE訪問都提示升級(包括IE11、IE10、IE9、IE8、IE7、IE6),每次打開都提示升級:

    <script>if (/*@cc_on!@*/false || (!!window.MSInputMethodContext && !!document.documentMode)) document.write('\x3Cscript id="_iealwn_js" data-outver="11" src="http://www.171vs.com/ie-alert-warning/latest.js">\x3C/script>'); </script>

    示例一。在IE10、IE9、IE8、IE7、IE6及以下版本提示升級,每次打開都提示升級:

    <script>/*@cc_on 
    var _iealwn = {once: 0, outver: 10};
    document.write('\x3Cscript id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js">\x3C/script>'); 
    @*/</script>

    默認配置就是 {once: 0, outver: 10},因此這個例子可以簡寫為:

    <script>/*@cc_on document.write('\x3Cscript id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js">\x3C/script>'); @*/</script>

    示例二。在IE9、IE8、IE7、IE6及以下版本提示升級,每次打開都提示升級:

    <!--[if lte IE 9]>
    <script>var _iealwn = {once: 0, outver: 9};</script>
    <script id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js"></script>
    <![endif]-->

    示例三。在IE8、IE7、IE6及以下版本提示升級,每次打開都提示升級:

    <!--[if lte IE 8]>
    <script>var _iealwn = {once: 0, outver: 8};</script>
    <script id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js"></script>
    <![endif]-->

    示例四。在IE7、IE6及以下版本提示升級,每次打開都提示升級:

    <!--[if lte IE 7]>
    <script>var _iealwn = {once: 0, outver: 7};</script>
    <script id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js"></script>
    <![endif]-->

    重復彈窗配置

    如配置解說所言,使用以上例子代碼,用戶點擊關閉彈窗后,只要打開或刷新頁面都會再次彈窗提示,因為 once 參數沒有配置有效數值。如果不想彈窗太頻繁,可以設置一個數值,例如3,那么,用戶點擊關閉彈窗后3分鐘內無論是打開新頁面還是刷新頁面都不會再彈窗提示。

    以下是一個例子:

    <script>/*@cc_on 
    var _iealwn = {once: 3, outver: 10};
    document.write('\x3Cscript id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js">\x3C/script>'); 
    @*/</script>

    這個功能的實現依賴 Cookie ,字段名為 _iealwn 。如用戶瀏覽器禁止了 Cookie 功能則配置失效。

    一個完整的HTML示例

    以下例子使用默認配置,微軟已經停止支持的IE10及更舊版IE都提示升級。

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8"/>
        <meta name="renderer" content="webkit"/>
        <meta name="force-rendering" content="webkit"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
        <script>/*@cc_on 
        document.write('\x3Cscript id="_iealwn_js" src="http://www.171vs.com/ie-alert-warning/latest.js">\x3C/script>'); 
         @*/</script>
        <title>網頁標題</title>
        <!-- 其他meta標簽 -->
    </head>
    <body>
        <h1>網頁內容</h1>
    </body>
    </html>

    代碼維護

    當前彈窗代碼已在 Windows XP IE6/IE7/IE8 和 Windows 7 IE8/IE9/IE10 環境下通過測試,均正常展示。但,由于多數雙核瀏覽器在IE兼容模式時都不向 userAgent 添加標識,難以識別,雙核瀏覽器切換內核示意圖僅在 Windows 7 IE9/IE10 內核可全部通過測試,在 IE6/IE7/IE8 內核僅部分通過測試,更多檢測方法仍在研究中,彈窗代碼仍在持續完善中。代碼及靜態資源由騰訊云及阿里云提供極速訪問。

    如有建議或BUG反饋請發送郵件到:

    技術參考資料

    Copyright © 2014 - 2019 End of IE SUPPORT. All Rights Reserved

    大香蕉影