Skip to content Skip to sidebar Skip to footer

How To Have A Button Refresh The Page On Send And Also Have Iframe Scroll To The Bottom Of The Frame Using The Same Button Simultaneously On Reload

Hellow there, id like to make my iframe scroll to the very bottom where the new output shows on every reload which is being triggered by a button, I've researched the question and

Solution 1:

To scroll to the bottom of an <iframe>, use:

iframe.contentWindow.scrollTo(0, iframe.contentDocument.documentElement.scrollHeight);

Take note that this will not work if the <iframe> has a different origin than the origin of your website

Full example:

<iframesrc="https://stacksnippets.net"></iframe><br/><button>Reload & Scroll To Bottom</button><script>const iframe = document.querySelector('iframe');
document.querySelector('button').addEventListener('click', function(){
  iframe.contentWindow.location = iframe.src;
  iframe.contentWindow.scrollTo(0, iframe.contentDocument.documentElement.scrollHeight);
})
</script>

Post a Comment for "How To Have A Button Refresh The Page On Send And Also Have Iframe Scroll To The Bottom Of The Frame Using The Same Button Simultaneously On Reload"