跳轉到iframe一旦加載

我正在尋找我的網頁跳到一個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」和「檔案館」下。

我希望我自己清楚，以便你能幫助我。提前致謝！

來源

2012-12-02 fpolloa

我看到你的網站的代碼，我明白你想要什麼。 iframe第一次是空的，所以你可以刪除它的onload，並在第一次點擊時綁定它（這將防止第一次改變哈希），然後嘗試第三次編輯我的答案。 – Roimer

它仍然無法正常工作。第三次編輯甚至沒有跳轉到iframe。我注意到了以下幾點：在第二次編輯中有這個''這將確保高度將在加載setIframeHeight（'myIframe'）之後更新;'這是它的問題。其餘的都很好。我需要的是在加載和跳轉之前調整大小：resize-load-jump。你怎麼看？ – fpolloa

順便說一句，我回到第二個選項，所以你可以看到：http://clavederock.com.ar – fpolloa

嘗試將window.location.hash='myIframe'從IFrameScroll()移動到setIFrameHeight()，因此您將在iframe具有所需大小後更改哈希值。

編輯＃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>

我真的希望這能解決你的問題:)

來源

2012-12-02 22:38:45 Roimer

嘿！謝謝你的幫助。我嘗試了你的第一個建議（EDIT之前的建議），它在firefox和IE9上效果很好。它雖然沒有在鉻上工作..我會嘗試另一種選擇。任何建議？ – fpolloa

奇怪的是，它沒有在鉻中工作。什麼沒有工作？ – Roimer

我發現鉻問題來自IFrameScroll函數。它只能在第一次點擊時運行，然後再無法運行。 – fpolloa

而不是跳轉到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') 
     } 
    ) 
});

來源

2012-12-02 22:44:28 Hat

跳轉到iframe一旦加載

回答

相關問題