页面负载受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影响

回答

相关问题