頁面負載受iframe影響

我爲我公司的客戶構建了一個WordPress插件，其中一個選項使用iframe。一位客戶向我指出了一個有趣的問題。當頁面加載時，它不會在頂部加載，但會在iframe之上加載（請參閱：http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/）。同樣的事情發生在我的測試網站以及我測試過的所有瀏覽器中（即chrome和firefox）。頁面負載受iframe影響

我已將範圍縮小到iframe，但它也可能與WordPress對待iframe的方式有關。 This question是類似的，但給出的答案是設置display: none;這是行不通的，因爲我需要顯示iframe的內容。

有什麼建議嗎？

來源

2012-11-29 Jeremiah Prummer

我不明白*「它沒有頂部加載，但負荷略高於'iframe'」 *。你是指加載順序還是某種z-index？當我訪問該頁面時，Chrome的控制檯將jQuery報告爲「未找到」... – brasofilo

@brasofilo，感謝您的評論。我不是指加載順序或z-index。對不起，如果不明確。當您訪問該頁面時，它會將您置於頁面中間，位於iframe頂部的上方，而不是位於頁面頂部。它不應該與jQuery有任何關係，因爲它不適用於我嘗試過的其他WordPress網站。在我的問題中鏈接的問題報告相同的問題，但沒有給出一個很好的解決方案... –

我最終找到了（兩週後）這個問題的答案。我把它從Nate的答案在這裏 - iframe on the page bottom: avoid automatic scroll of the page

我用：

<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" href="..."></iframe>

這似乎已經完全消除了滾動問題。

這是奈特的座右銘：

Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.

來源

2012-12-20 18:13:49

使用scrollTo函數並將這一點的JavaScript放在頁面的末尾。我把這個從Scrolling an iframe with javascript?

var myIframe = document.getElementById('iframe'); 
    myIframe.onload = function() { 
     myIframe.contentWindow.scrollTo(xcoord,ycoord); 
    }

如果jQuery的參與，您可以使用此：

<script type="text/javascript"> 
     $(document).ready(function() { 
      window.scrollTo(0,0); 
     }); 
    </script>

來源

2012-11-29 23:30:51 stevepowell2000

感謝您的答覆。不幸的是，這並沒有解決問題，但它使我朝着正確的方向前進。因爲這是一個wordpress插件，我會避開jQuery。我嘗試過，但主題之間的差異太大，無法正常工作。當我使用javascript示例時，我得到_Uncaught TypeError：無法設置null_屬性'onload'任何想法這可能是什麼？此外，我想要使用'document.scrollTo（0,0）'，因爲我試圖將文檔滾動到頂部，而不是iframe。 –

我會延長scrollTo問題通過@ stevepowell2000指出，建議您檢查的所有腳本那0123,，很可能有一個scrollTo去那裏。

我發現這個在iframe源，但我not sure，如果它的相關或不...

$("#siteMasterPage").live('pageshow', function(event) { 
    var currentArea = $('#hidCurrentArea').val(); 
    if (currentArea === "business") {    
     setTimeout(function() { 
      $.mobile.silentScroll(30); 
     }, 10); 
    } 
});

如果是這樣的情況確實如此，該問題將是如何防止這種情況，因爲將第二滾動可能看起來很奇怪。

來源

2012-11-30 00:13:24 brasofilo

謝謝！我將更多地關注'$ .mobile.silentScroll（30）;'，看看我能找到什麼。從我所看到的可能是這個問題。 –

頁面負載受iframe影響

回答

相關問題