Question

I have the following code:

<iframe id="preview" onLoad="scrollToBottom()"></iframe>

My objective – When the frame reloads, the “scrollToBottom()” function is triggered, which will take the user to the end of the iFrame (instead of the beginning of the frame, which is by default). The code I have now is:

function scrollToBottom() {
    window.scrollTo(0, document.body.scrollHeight);

}

I know, somehow I have to figure/pass the scrollHeight of the iframe, but I am not sure how to do that. A solution in JavaScript or jQuery is what I want. There are a few solutions I saw here, but none of them are working for me. BTW…I don’t need any animation or effects…just need a simple/plain solution.

Any help will be appreciated. Thanks in advance.

Answer 1

The following method should work.

$('#preview').contents().scrollTop($('#preview').contents().height());

However, in this case, the iframe itself must from your domain or it throws an error

Unsafe JavaScript attempt to access frame, Domains, protocols and
ports must match.