1. 程式人生 > >[Html JS] jQuery錨點跳轉及相關操作 IE10 11 下相容性問題

[Html JS] jQuery錨點跳轉及相關操作 IE10 11 下相容性問題

最近工作上遇到的問題。就是這個  錨點就不多說了,如下解釋。主要問題是我在chrome,火狐,ie8下都ok的。NTC測試,報了個bug,說IE10.11就不行了。
這裡寫圖片描述
主要是這個頁面分三個frame,我試了下一些常規的辦法就不work。

思路:在載入頁面,比如help這個頁面。判斷如果是IE10.11則,在頁面初始化後再載入一個函式。這個函式在根據url的錨點在跳轉到相應位置。
因為在初始化時候頁面的url連結已經處理了。類似http://192.168.1.1/help.htm#LEDID

function set_help_idForIE1011() {
    var tmp = checkIEVersion();//獲取IE版本資訊
if(tmp >= 10) { var url = window.location.toString();//獲取當前頁面的url http://192.168.1.1/help.htm#LEDID var id = url.split("#")[1];//得到LEDID if (id) { var t = $("#" + id).offset().top; $(window).scrollTop(t);//跳轉到LEDID處 } } }

IE版本如何獲取,看這裡:

[Html JS] 判斷IE的版本
這樣就解決IE10.11下錨點失效的問題。


錨點
html 錨點 到底是幹嗎的?
通俗簡單地說,比如一篇很長的文章,你想按分段精確來看,那就可以用到錨點了。
程式碼:

<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" ></a>
...文字省略

其實錨點只需name就可以可,加id是為了讓它相容性更好.
href的值要跟name \ i d 一致,前面必須加”#”,以上程式碼在ie6/7,ff中都可以相容,但在ie8中就不行。
因為我們錨點的值為空,為不影響美觀我們加個空格就行了,

如以下程式碼,就可以相容ie8
<a href="#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略

另一問題,想顯示某頁面(如:123.html)的某錨點內容呢?

程式碼如下
<a href="123.html#001">跳到001</a>
...文字省略
<a name="001" id="001" > </a>
...文字省略

來自

//For IE 10.11 Help content location problem  start add by leo
var IEVersion;
function check_browser_version() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

    if (Sys.ie)
    {
        //document.write('IE: ' + Sys.ie);
        IEVersion =parseInt(Sys.ie);
        //alert(IEVersion);
    }
    else
    {
        IEVersion = -1; //-1 is not ie browser
    }

/*  
    if (Sys.firefox) 
    {
        //document.write('Firefox: ' + Sys.firefox);
    }
    if (Sys.chrome) 
    {
        //document.write('Chrome: ' + Sys.chrome);
    }
    if (Sys.opera) 
    {
        //document.write('Opera: ' + Sys.opera);
    }
    if (Sys.safari) 
    {
        //document.write('Safari: ' + Sys.safari);
    }
*/
    return IEVersion;
}


/*
this function just set help page content location for ie10,11. 
it only works in browser IE 10,11  
*/
function set_help_idForIE1011() {
    //var tmp = checkIEVersion(); 
    var tmp = check_browser_version(); 
    //alert(tmp);
    if(tmp >= 10)
    {
        var url = window.location.toString();
        //alert(url);
        var id = url.split("#")[1];
        //alert(id);
        if (id) 
        {
            var t = $("#" + id).offset().top;
            $(window).scrollTop(t);
        }
    }
}
//For IE 10.11 Help content location problem  end