舊版 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 (/*@[email protected]*/false || (!!window.MSInputMethodContext && !!document.documentMode)) document.write('\x3Cscript id="_iealwn_js" data-outver="11" src="http://www.756689.live/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.756689.live/ie-alert-warning/latest.js">\x3C/script>'); 
@*/</script>

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

<script>/*@cc_on document.write('\x3Cscript id="_iealwn_js" src="http://www.756689.live/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.756689.live/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.756689.live/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.756689.live/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.756689.live/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.756689.live/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 內核僅部分通過測試,更多檢測方法仍在研究中,彈窗代碼仍在持續完善中。代碼及靜態資源由騰訊云及阿里云提供極速訪問。

技術參考資料

Copyright © 2014 End of IE SUPPORT. All Rights Reserved

捕鱼达人千炮版弹头如何兑换金币 江苏11选5前三组 青海快三 股票配资平台无法出金 河北体彩十一选五玩法 吉林快三赢钱秘诀 安凯客车股票股吧 五分彩平台游戏 万达商城娱乐登录平台 如何看股票涨跌走向 安徽十一选五遗漏