如何給網站添加IE瀏覽器升級提示

時間 2019-11-30

標籤如何網站添加瀏覽器升級提示欄目網站開發简体版

原文原文鏈接

1.在代碼編輯器中（如Notepad++）打開網站頭部模板html

2.使用<!––[if IE]>語句添加升級提示，如:web

判斷是否IE（包含使用IE內核的瀏覽器）chrome

<!––[if IE]>你正在使用的是IE瀏覽器<![endif]––>瀏覽器

判斷當前瀏覽器是否某個IE版本，如下例子是指等於IE6。若是咱們要特指IE7則把 if IE 6 改爲 if IE 7 便可，以此類推。app

<!––[if IE 6]>你使用的是IE6瀏覽器，這是IE的過時版本，是時候升級了！<![endif]––>編輯器

判斷當前瀏覽器是否IE瀏覽器以及小於等於某個版本，如下例子是指小於等於IE8。若是要指小於等於 IE 9 則把 if lte IE 8 改成 if lte IE 9 便可。網站

ui

須要注意的是，if IE 語句只支持到 IE 9 ，要判斷 IE10 須要使用JS語句。spa

3.應用實例（使用方法：添加在網站頭部代碼</head>以前）.net

IE8及如下版本提示升級

IE9及如下版本提示升級

IE10及如下版本提示升級（方法一，@cc_on 是 IE10 及更舊版IE特有的條件編譯語句，所以能夠用來判斷是否除 IE11 的其餘IE版本。推薦此方法，但須要注意，如使用自動過濾註釋，要確認升級代碼有沒有被誤刪）

IE10及如下版本提示升級（方法二，判斷UA）

4.值得注意的是，國產瀏覽器每每內置Chromium（即谷歌瀏覽器內核）和IE雙內核，咱們可使用頭部代碼令其調用先進的Chromium內核，給用戶更優質的訪問效果。

這個代碼須要添加在IE升級代碼前面，以下所示：

升級提示彈窗代碼

上文介紹的代碼是是跳轉到瀏覽器升級提示頁的代碼，這並不能適用全部業務場景。例若有的網站以文字內容爲主，雖然在舊版ie中內容錯版，可是依然能夠勉強瀏覽，針對這種狀況，咱們可使用彈窗代碼，實如今不跳出本站的前提下爲用戶提供瀏覽器升級提示。

1.彈窗代碼用法（將如下代碼添加在 <head> 以後）：

在IE8及更舊版IE提示升級：

在IE9及更舊版IE提示升級：

在IE10及更舊版IE提示升級：

一個完整的HTML示例：

<!DOCTYPE html>

<html>

<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="//support.dmeng.net/ie-alert-warning/latest.js">\x3C/script>'); @*/</script>

    <title>網頁標題</title>

    <!-- 其餘meta標籤 -->

</head>

<body>

    <h1>網頁內容</h1>

</body>

</html>

案例二：講如下代碼放在<head> 以後

<!--IE 9及如下升級提示-->
        <!--[if lte IE 9]>
            <script>
                var str = "<p style='font-size:24px;;'>您的瀏覽器版本太低！</p>";
                var str2 = "推薦使用：<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>谷歌</a>，" +
                    "<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E7%81%AB%E7%8B%90%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>火狐</a>，" +
                    "其餘雙核極速模式";
                document.writeln("<div style='text-align:center;color:#fff;background-color:#ccc; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
                    "<h2 style='padding-top:200px;margin:0'><strong>" + str + "<br/></strong></h2><h2>" +
                    str2 + "</h2><h2 style='margin:0'><strong>若是你的使用的是雙核瀏覽器,請切換到極速模式訪問<br/></strong></h2></div>");
                document.execCommand("Stop");
            </script>
        <![endif]-->

參考：https://jingyan.baidu.com/article/39810a23e5f483b637fda642.html