代码之家 › 专栏 › 技术社区 › kenwarner

<iframe src=“reallylongpage.html#bottom”/>不起作用

anchor iframe html jquery

kenwarner · 技术社区 · 16 年前

我有以下嵌入的iframe

<iframe width="100%" height="400" src="reallylongpage.html" />

reallylongpage.html有两个锚点#顶部和#底部

我希望我的iframe在页面底部加载reallylongpage.html,所以我这样做了

<iframe width="100%" height="400" src="reallylongpage.html#bottom" />

但是这会产生不希望的效果,即滚动iframe和父页面。父页根本不应该滚动。这发生在Chrome和Firefox中。

下面是一个完整代码的示例

<html>
 <body>
    <div style="padding:100 200;">
      <iframe WIDTH="100%" HEIGHT="400" SRC="CHILD.HTML#BOTTOM" ></iframe>
    </div>
    <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
 </body>
</html>

<html>
  <body>
    <a name="top" href="#bottom">go to bottom</a><br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    <a name="bottom" href="#top">go to top</a>
 </body>
</html>

这就是我想要的样子

这是我得到的

2 回复 | 直到 7 年前

brianpeiris 16 年前

这似乎是浏览器中的实际行为(至少我找不到任何关于锚定和滚动的书面标准)。

浏览器会尽力滚动所有窗口,直到看到所需的片段(你会注意到这一点,即使你点击“到达顶端”链接,也如果你添加了“填充底部:3000px到您示例中的div。)

考虑使用 jQuery's scrollTo plugin

用你自己的例子来演示:

托管演示:

With jQuery scrollTo

Without jQuery scrollTo

完整来源:

父.html

<!doctype html>
<html>
    <head>
        <title>parent</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                var iframe = $('iframe');
                iframe.load(function(){
                    iframe.scrollTo('a[name=bottom]');
                });
            });
        </script>
    </head>
    <body>
        <div style="padding:100px 200px 3000px;">
            <iframe width="100%" height="400" src="child.html"></iframe>
        </div>
        <div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br></div>
    </body>
</html>

子.html

<!doctype html>
<html>
    <head>
        <title>child</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('a').click(function(){
                    $(window).scrollTo('a[name=' + this.hash.substring(1) + ']');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <a name="top" href="#bottom">go to bottom</a><br>
        1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
        <a name="bottom" href="#top">go to top</a>
 </body>
</html>

Starx 16 年前

嗯,它只是一个混乱的浏览器。我看了一下,发现 name="bottom" 除此之外什么都没有。由于浏览器需要将焦点放在该元素上,并将其放置在其顶部的窗口中,因此在iframe中找不到任何可以滚动该元素的内容 #bottom 到顶部,所以它滚动父对象,但只带 #buttom 到顶端。

我已经用你的代码设置了一个页面 http://jsfiddle.net/VGN2k/ 来解释我说的话。过来看

我所做的是增加了一堆 <br/> 在“#bottom”之后,为了创造空间,现在浏览器有了空间,可以用来带来空间 #底部 在上面。