<IFRAME SRC = 「reallylongpage.html＃底部」/>不工作

我有以下嵌入的iframe<IFRAME SRC = 「reallylongpage.html＃底部」/>不工作

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

這是我希望它看起來像

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

來源

2010-08-05 kenwarner

哇，我從來沒有注意到這一點。 Google上的每一個鏈接似乎都沒有提供任何解決方案：-O 肯定會喜歡這一個......希望有人更好地瞭解並且啓發我們兩個。 – Pandincus 2010-08-06 21:02:07

這似乎是瀏覽器中的事實上的行爲（至少我找不到任何關於錨點和滾動的書面標準）。

瀏覽器盡力滾動所有窗口，直到看到所需的片段。（即使當您點擊「got to top」鏈接，並且在您的示例中向div添加「padding-bottom：3000px;」時，您會注意到這一點）。

考慮使用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>

來源

2010-08-07 04:34:59 brianpeiris

那麼，它只是一個混亂的瀏覽器。我做了一個快速的檢查，發現你的name="bottom"除此之外什麼都沒有。由於瀏覽器需要關注該元素並將其放置在頂部，因此它沒有在iframe中找到任何可以將#bottom滾動到頂部的內容，因此它滾動了父級，但僅將#buttom置頂。

我用你的代碼在這裏設置了一個頁面，它是http://jsfiddle.net/VGN2k/來解釋我在說什麼。檢查出來

我所做的是在「#bottom」之後添加一堆<br/>以創建空間，現在瀏覽器有空間可以使用它將#bottom置頂。

來源

2010-08-07 04:52:32 Starx

<IFRAME SRC = 「reallylongpage.html＃底部」/>不工作

回答

託管演示：

全部來源：

parent.html

child.html

相關問題