Question

Im looking for my webpage to jump to an iframe when someone click. I’ve found one solution which works pretty well which is this: 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">

I’ve tried on my web and it partially works except for the fact it scrolls to the iframe before it loads so it doesn’t goes that far to the bottom because once the iframe its loaded the page fully extends.

The web in question is the following: http://www.clavederock.com.ar –
The links are under the tabs “Quienes Somos” “Programacion” and “Archivo”.

I hope i made myself clear so you can help me. Thanks in advance!

Answer 1

Try moving window.location.hash='myIframe' from the function IFrameScroll() to setIFrameHeight(), so you’ll change the hash once the iframe have the desired size.

EDIT #3:

Since you need to wait until iframe is loaded in order to resize it and window.location.hash doesn’t works the second time in chrome, you can try this:

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

I really hope this solve your problem 🙂