Question

我有以下嵌入式iframe

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

reallylongpage.html有2个锚#top和#bottom

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

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

但这会产生滚动iframe和父页面的不良影响。父页面根本不应滚动。这种情况发生在Chrome和Firefox中。

这是一个完整代码的例子

parent.html

<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>

child.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>

这就是我想要它的样子 correct http://i38.tinypic.com/2gxh1f6.png

这是我得到的 incorrect http://i33.tinypic.com/2gy0t1x.png

Answer 1

这似乎是浏览器中的事实上的行为（至少我找不到任何关于锚点和滚动的书面标准）。

浏览器会尽力滚动所有窗口，直到所需的片段可见。（即使您单击“到达顶部”链接，并且在示例中将“padding-bottom：3000px;”添加到div中，您也会注意到这一点。）

考虑使用jQuery's scrollTo plugin实际操作适当容器的滚动位置。

使用您自己的示例进行演示：

托管演示：

With jQuery scrollTo

Without jQuery scrollTo

完整来源：

parent.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>

child.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>

Answer 2

嗯，这只是一个混乱的浏览器。我快速浏览了一下，发现你的name="bottom"没有任何东西。由于浏览器需要关注该元素并将窗口置于其顶部，因此它在iframe中找不到任何可以将#bottom滚动到顶部的内容，因此它滚动了父元素，但只是为了带来#buttom到顶部。

我在这里设置了一个包含您的代码的页面http://jsfiddle.net/VGN2k/来解释我在说什么。看看

我所做的是在“#bottom”之后添加一堆<br/>以创建空间，现在浏览器有空间可以用来将#bottom放在顶部。

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

2 个答案:

托管演示：

完整来源：

parent.html

child.html