Question

我为我公司的客户构建了一个WordPress插件，其中一个选项使用iframe。一位客户向我指出了一个有趣的问题。页面加载时，它不会加载到顶部，而是加载到iframe之上（请参阅：http://salondshayn.com/wp/staff/jude-hair-stylist-hairdresser-scottsdale/）。同样的事情发生在我的测试网站上，并且在我测试的所有浏览器中（例如，chrome和firefox）。

我已将其缩小到iframe，但它也可能与WordPress处理iframe的方式有关。 This question类似，但给出的答案是将display: none;设置为无效，因为我需要显示iframe的内容。

有什么建议吗？

Answer 1

使用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>

Answer 2

我会扩展@ stevepowell2000指出的scrollTo问题并建议您检查iframe的所有脚本，很可能还有scrollTo。

我在iframe源代码中找到了这个内容，但如果它与之相关，则为not sure ...

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

如果确实如此，问题就是如何防止这种情况，因为应用第二个卷轴可能看起来很奇怪。

Answer 3

我最终（两周后）找到了这个问题的答案。我从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>

它似乎完全消除了滚动问题。

这是Nate的话：

这里我们基本上是说隐藏框架并将其垂直移动到页面上的负偏移。当它试图将元素聚焦在框架内部时，它应该向上滚动页面，然后一旦加载就将iframe放回到它的预期位置。

受iframe影响的网页加载

3 个答案: