<iframe src = "действительностиlongpage.html # bottom" /> не работает - PullRequest
Новая
       17

<iframe src = "действительностиlongpage.html # bottom" /> не работает

4 голосов
/ 06 августа 2010

У меня есть следующий встроенный iframe 

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

в самом деле есть 2 якоря #top и # bottom

.

Я хочу, чтобы мой iframe загрузил файл действительностиlongpage.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>

это то, что я хочу, чтобы это выглядело правильно http://i38.tinypic.com/2gxh1f6.png

это то, что я получаю вместо неверно http://i33.tinypic.com/2gy0t1x.png

Ответы [ 2 ]

2 голосов
/ 07 августа 2010

Похоже, что это де-факто поведение в браузерах (по крайней мере, я не смог найти никакого письменного стандарта об якорях и прокрутке).

Браузер старается прокручивать все окна, пока не появится нужный фрагмент. (Вы заметите это даже тогда, когда нажмете ссылку «до верха», а также если добавите «padding-bottom: 3000px;» в div в вашем примере.)

Подумайте об использовании плагина jQuery scrollTo , который фактически управляет позицией прокрутки соответствующего контейнера.

Для демонстрации на собственном примере:

Размещенные демоверсии:

С помощью jQuery scrollTo

Без прокрутки jQuery до

Полный источник:

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>
0 голосов
/ 07 августа 2010

Ну, это просто запутанный браузер. Я быстро осмотрелся и обнаружил, что у вашего name="bottom" ничего нет. Поскольку браузер должен сфокусироваться на этом элементе и поместить его окно в его верхнюю часть, он не нашел внутри iframe ничего, что могло бы прокрутить #bottom до вершины, поэтому он прокрутил родительский элемент, но только для вывода #buttom наверх.

Я установил страницу с вашим кодом, это http://jsfiddle.net/VGN2k/, чтобы объяснить, что я говорю. Проверьте это

То, что я сделал, добавило кучу <br/> после «#ottom», чтобы создать пространство, теперь в браузере есть пространство, которое он может использовать, чтобы вывести #bottom наверх.

...