Question

我正在寻找我的网页，当有人点击时跳转到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”标签下。

我希望自己清楚明白，这样你就可以帮助我。提前谢谢！

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

我真的希望这能解决你的问题：）

Answer 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')
        }
    )
});

加载后跳转到iframe

2 个答案: