iframe锚点定位在firefox火狐浏览器下失效解决方案

快乐打工仔 分类:实例代码

iframe锚点定位在firefox火狐浏览器下失效解决方案属于前端实例代码,有关更多实例代码大家可以查看

关于锚点定位大家一定都不会陌生,使用锚点可以实现定位效果。

如果确实不了解描点定位的话,可以参阅html利用锚点实现定位代码实例一章节。

出现问题的场景如下:

A.html是父页面,它里面使用<iframe>标签引用B.html页面。

B.html页面里面有几个定位锚点,点击可以定位到响应的位置,此页面是有垂直滚动条出现的,但是在引入到A.html页面中以后,由于设置了iframe的相关高度,所以没有出现滚动条,这样再A.html中点击B.html中的锚点的时候,在IE和谷歌中都可以实现正常的定位跳转功能,但是在火狐浏览器中不能够正常跳转,下面就介绍一下如何解决此问题。

看下面的代码实例,将代码复制到响应页面就可以测试效果。

主页面代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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页面的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()方法一章节。

iframe锚点定位在firefox火狐浏览器下失效解决方案,这样的场景在实际项目中还是用的比较多的,关于iframe锚点定位在firefox火狐浏览器下失效解决方案就介绍到这了。

回复

我来回复
  • 暂无回复内容