[Html JS] jQuery錨點跳轉及相關操作 IE10 11 下相容性問題
阿新 • • 發佈:2019-01-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