加载后跳转到 iframe答案

【问题标题】：Jump to iframe once it loads加载后跳转到 iframe
【发布时间】：2012-11-20 09:42:52
【问题描述】：

我正在寻找我的网页以在有人点击时跳转到 iframe。我找到了一种效果很好的解决方案：http://jsfiddle.net/RGjCL/4/

<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”选项卡下。

我希望我说清楚了，以便您可以帮助我。提前致谢！

【问题讨论】：

我看到了你网站的代码，我明白你想要什么。 iframe 第一次是空的，所以你可以删除它的 onload 并在第一次点击时 bind 它（这将防止第一次更改哈希），然后尝试我的答案的第三次编辑。
它仍然无法正常工作。第三次编辑甚至没有跳转到 iframe。我注意到以下内容：在第二次编辑中有这个this will ensure the height will be updated after the load setIframeHeight('myIframe'); 这是问题所在。其余的都做得很好。我需要的是在加载之前调整大小并跳转到它：resize-load-jump。你怎么看？
顺便说一句，我回到了第二个选项，所以你可以看到：clavederock.com.ar

标签： javascript html iframe scroll

【解决方案1】：

尝试将 window.location.hash='myIframe' 从函数 IFrameScroll() 移动到 setIFrameHeight()，这样一旦 iframe 达到所需大小，您就可以更改哈希值。

编辑#3：

由于您需要等到 iframe 加载后才能调整其大小，而 window.location.hash 在 chrome 中第二次不起作用，您可以试试这个：

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

我真的希望这能解决你的问题:)

【讨论】：

嘿！谢谢你的帮助。我尝试了你的第一个建议（编辑之前的那个），它在 Firefox 和 IE9 上效果很好。但它在 chrome 上不起作用。我会尝试其他选项。有什么建议吗？
奇怪的是它在 chrome 中不起作用。究竟是什么不起作用？
我发现chrome问题来自IFrameScroll函数。它仅在第一次单击时有效，然后不再有效。
我实际上需要加载 iframe 来调整它的大小。我尝试了你的第二个选项，我的 iframe 在显示内容之前没有调整大小，所以它不起作用
我明白了！ :-) 抱歉，我的第一个意图对你不起作用：setIframeHeight 在 iframe 第一次加载时也正在执行，带有原始 url，这就是为什么 clavederock.com.ar 在第一次加载时更改为 clavederock.com.ar#myIframe .尝试我的第二个意图，所以它只在用户点击时滚动。

【解决方案2】：

您可以进行平滑滚动，而不是跳转到 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')
        }
    )
});

【讨论】：