iframe錨點定位在firefox火狐瀏覽器下失效解決方案

admin發表於2017-12-04
Firefox瀏覽器

關於錨點定位大家一定都不會陌生，使用錨點可以實現定位效果。

如果確實不瞭解描點定位的話，可以參閱html利用錨點實現定位程式碼例項一章節。

出現問題的場景如下:

A.html是父頁面，它裡面使用<iframe>標籤引用B.html頁面。

B.html頁面裡面有幾個定位錨點，點選可以定位到響應的位置，此頁面是有垂直滾動條出現的，但是在引入到A.html頁面中以後，由於設定了iframe的相關高度，所以沒有出現滾動條，這樣再A.html中點選B.html中的錨點的時候，在IE和谷歌中都可以實現正常的定位跳轉功能，但是在火狐瀏覽器中不能夠正常跳轉，下面就介紹一下如何解決此問題。

看下面的程式碼例項，將程式碼複製到響應頁面就可以測試效果。

主頁面程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  border:0;
}
html,body{
  width:100%;
  height:100%;
}
#top{
  width:100%
  ;background:#f00;
  height:500px;
}
</style>
</head>
<body>
<div id="top"></div>
<iframe id="iframe2" src="iframe.html?a=b&c=d" style="width:100%;height:2060px;"></iframe>
<iframe id="iframe2" src="iframe.html?a=d&c=b" style="width:100%;height:2060px;"></iframe>
</body>
</html>

iframe.html頁面的程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a{
  padding:5px;
  border:1px solid #f00;
  float:left;
  display:block;
  margin-right:5px;
}
div{
  width:80%;
  margin:10px auto;
  height:500px;
  border:1px solid #f00;
  font-size:30px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  if(window!==window.top){
    var iframeList=window.top.document.getElementsByTagName('iframe');
    for(var index=0;index<iframeList.length;index++){
      if(window.location.toString().indexOf(iframeList[index].getAttribute('src').toString())!=-1){
        window.top.document.getElementsByTagName('iframe')[index]._index=index;
        window.top.document.getElementsByTagName('iframe')[index].onload=function(){
         var top=window.top.document.getElementsByTagName('iframe')[this._index].offsetTop;
          $('a').each(function(){
            var href = $(this).attr('href');
            if(href.indexOf('#')!=-1){
              var name = href.substring(href.indexOf('#')+1);
              $(this).bind('click',function(){
                $('a').each(function(){
                  if($(this).attr('name')==name){
                    //父視窗滾動
                    $(window.parent).scrollTop($(this).offset().top+top);
                  }
                });
              });
            }
          });
        }
      }
    }
  }
});
</script>
</head>
<body>
<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>
<a href="#d">d</a>
<div><a href="" name="a">A</a></div>
<div><a href="" name="b">B</a></div>
<div><a href="" name="c">C</a></div>
<div><a href="" name="d">D</a></div>
</body>
</html>

程式碼直接複製到相應的頁面就可以使用。

上面的程式碼也是來源於網路，並且是廣泛傳播的，但是原有的版本是有錯誤的，根本無法沒有實現指定的功能，上面是修正的版本。下面對它的實現過程做一下介紹。

一.程式碼註釋:

1.$(function(){})，當文件結構載入完畢再去執行函式中的程式碼。

2.if(window!==window.top)，判斷當前視窗是否是頂級視窗，如果不是頂級視窗的話，那就是在子頁面中。

3.var iframeList=window.top.document.getElementsByTagName('iframe')，獲取頂級頁面中iframe元素物件。

4.for(var index=0;index<iframeList.length;index++)，使用for迴圈遍歷每一個iframe元素物件。

5.if(window.location.toString().indexOf(iframeList[index].getAttribute('src').toString())!=-1)，iframe.html頁面被哪一個父頁面中的<iframe>標籤引用，這個主要是通過iframe.html?a=b&c=d後面的引數來進行區分的，確定了是哪一個也就可以確定他們的位置。

6.window.top.document.getElementsByTagName('iframe')[index]._index=index，為當前建立一個自定義屬性_index，並賦值為它在iframe物件集合中的索引，以便於在事件處理函式中使用。7.window.top.document.getElementsByTagName('iframe')[index].onload=function(){},註冊onload事件處理函式。

8.var top=window.top.document.getElementsByTagName('iframe')[this._index].offsetTop，獲取iframe元素距離父窗體頂部的距離。

9.$('a').each(function(){})，獲取頁面的連結元素物件集合，然後使用each()函式進行遍歷。

10.var href = $(this).attr('href')，獲取連結a元素的href屬性值。

11.if(href.indexOf('#')!=-1)，判斷當前連結a元素是個錨點而不是連結。

12.var name = href.substring(href.indexOf('#')+1),進行字串擷取，擷取錨點href屬性值中#後面的部分。

13.$(this).bind('click',function(){})，註冊click事件處理函式。

14.$('a').each(function(){})，遍歷每一個a元素。

15.if($(this).attr('name')==name)，判斷連結a的name屬性值是否等於name變數的值。

16.$(window.parent).scrollTop($(this).offset().top+top)，如果相等，那麼就進行相應的定位。

二.相關閱讀:

1.indexOf()函式可以參閱javascript indexOf()方法一章節。

2.substring()函式可以參閱javascript substring()方法一章節。

3.bind()函式可以參閱javascript bind()一章節。

4.$(selector).each()方法可以參閱jQuery each()方法一章節。 

5.scrollTop()函式可以參閱jQuery scrollTop()方法一章節。 

6.offset()可以參閱jQuery offset()方法一章節。

相關文章