2012-12-02 2 views
0

Im ищет мою веб-страницу, чтобы перейти к iframe, когда кто-то щелкнет. Я нашел одно решение, которое работает довольно хорошо, который заключается в следующем: http://jsfiddle.net/RGjCL/4/Перейти к iframe после его загрузки

<ul> 
    <li> 
     <a href="javascript:void(0)" onclick="IFrameScroll('http://www.asdf.com')">Class Name</a> 
    </li> 
</ul> 

<script type="text/javascript"> 
    function IFrameScroll(link){ 
     window.myIframe.location=link; 
     window.location.hash='myIframe' 
    } 
</script> 
<IFRAME id = "myframe" onload = "setIframeHeight(this.id)" name="myIframe"> 

Я пробовал на моем веб, и это частично работает на самом деле она прокручивается в IFRAME, за исключением, прежде чем он загружает так это не так далеко, потому что после того, как iframe загрузится, страница полностью расширится.

Веб-сайт: http://www.clavederock.com.ar - Ссылки находятся под вкладками «Quienes Somos» «Programacion» и «Archivo».

Надеюсь, я ясно дал понять, что вы можете мне помочь. Заранее спасибо!

+0

10 Я видел код вашего сайта, и я понимаю, чего вы хотите. Iframe пуст в первый раз, поэтому вы можете удалить его и * привязать его при первом щелчке (это предотвратит изменение хеша в первый раз), а затем попробуйте третье редактирование моего ответа. – Roimer

+0

он все еще не работает. Третье редактирование даже не переходило к iframe. Я заметил следующее: во втором редактировании это «это обеспечит обновление высоты после загрузки setIframeHeight (« myIframe »);« Это его проблема. Остальное делалось хорошо. Мне нужно изменить размер перед загрузкой и перейти к нему: resize-load-jump. Как вы думаете? – fpolloa

+0

BTW я вернулся ко второму варианту, чтобы вы могли увидеть: http://clavederock.com.ar – fpolloa

ответ

1

Попробуйте переместить window.location.hash='myIframe' от функции IFrameScroll() до setIFrameHeight(), так что вы измените хэш после того, как iframe имеет желаемый размер.

EDIT # 3:

Так как вам нужно ждать, пока IFrame не будет загружен, чтобы изменить его размер и window.location.hash не работает во второй раз в хроме, вы можете попробовать это:

<script type="text/javascript"> 
    function IFrameScroll(link){ 

     window.myIframe.onload = function() { 
      // this will ensure that the height will be updated after load 
      setIframeHeight('myIframe'); 
      // This works on FF and IE, and let users to bookmark 
      window.location.hash='myIframe'; 
      // and this will allow it to scroll the second time for chrome 
      document.getElementById('myIframe').scrollIntoView(true); 
     } 

     window.myIframe.location=link; 

    } 
</script> 

Я действительно надеюсь, что это решит вашу проблему :)

+0

Эй! Спасибо за вашу помощь. Я попробовал свое первое предложение (до EDIT), и он отлично справился с Firefox и IE9. Он не работал на хроме, хотя .. Я попробую другой вариант. Любое предложение? – fpolloa

+0

Странно, что он не работал в хроме. Что именно не сработало? – Roimer

+0

Я обнаружил, что проблема с хромом возникает из функции IFrameScroll. Он работает только в первый раз, когда один клик, а затем он больше не работает. – fpolloa

1

Вместо того, чтобы прыгать в iframe, вы можете сделать гладкий свиток. Это даст немного больше времени для загрузки iframe после того, как была нажата ссылка.

Альтернативно и, возможно, более эффективно, вы можете загрузить iframe с остальной частью страницы, но сделать ее невидимой. Тогда вам просто нужно показать его, когда пользователь нажмет на ссылку

//load the page with the iframe hidden 
//in css 
#myIframe { visibility: hidden; } 
//use jquery to make it visible when the user clicks the link 
//you could do this with javascript if you don't want to import jQuery, but I find jQuery easier 
$(document).ready(function() { 
    $('#myAnchorTagId').click(
     function() { 
      $('myIframe').css('visibiliy', 'visible') 
     } 
    ) 
}); 
Смежные вопросы