M.C. M.C. - 28 days ago 8
HTML Question

Javascript - scroll bottom within another browser/page

I have created a button that with one click opens other html page to another browser, but how can I scroll it to the bottom?

Here code: (file.js)

output = "Hello World";

var _X1 = window.open("", "Test", "width=300, height=300, scrollbars=1, resizable=1").document.body.innerText += output + '\r\n';


It opens another browser's page, and prints the words. But what now? How to scroll to bottom?

Answer

This works (tested in Chrome)

output = ["Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec blandit elit. Sed sagittis sapien et metus tempor, a ullamcorper velit facilisis. Phasellus sit amet varius ante. Quisque elementum ex ut ligula maximus aliquam. Fusce et odio dignissim, posuere ligula a, scelerisque libero. Sed varius ex ut nibh posuere tristique. Vestibulum euismod tortor scelerisque urna facilisis commodo. Ut pellentesque, lectus ac euismod pellentesque, odio orci sagittis justo, at viverra ante nibh eget est. Proin in justo nec urna rhoncus tincidunt sed sed dui. Mauris eget turpis venenatis, rhoncus arcu quis, cursus diam. Phasellus ut mi dolor. Praesent finibus eget nisl ut posuere. Suspendisse potenti. Vestibulum sollicitudin convallis aliquet.",
"Integer felis ligula, sagittis a aliquet vel, convallis non mi. Nullam a tortor consectetur enim tincidunt dapibus id at ligula. Ut vitae bibendum arcu. Aliquam lectus enim, scelerisque ut sapien sed, cursus luctus massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam risus elit, pellentesque et ligula eu, posuere venenatis nunc. Donec erat dui, tristique pellentesque ultricies ut, ultrices a ex. Donec sed orci pharetra, commodo libero eget, dignissim lorem. Nam porta fringilla risus, sed consequat tortor accumsan nec. Integer in lectus vitae urna imperdiet consequat vel quis erat. Pellentesque dapibus, justo at eleifend facilisis, dolor magna ullamcorper ligula, ut volutpat odio est eget mi. Pellentesque nec auctor mauris, in viverra enim. Curabitur maximus sed leo in venenatis. Etiam lacinia vitae felis in gravida. Nulla facilisi.",
"Morbi vehicula mollis congue. Nullam hendrerit vel diam non tincidunt. Vivamus commodo augue id nisi vulputate, vitae suscipit sem vehicula. Nam ullamcorper tincidunt quam sit amet maximus. Nunc eros leo, dignissim nec sollicitudin auctor, faucibus ut est. Ut ut odio risus. Cras egestas, sapien sit amet suscipit porttitor, erat ex tincidunt lorem, at ultricies ex risus in nisi. Phasellus ac mattis enim, vitae tempus libero. Etiam lobortis blandit arcu at ultrices. Nam eros nunc, condimentum eu hendrerit id, porta eget tortor. Ut dictum sem quam, a laoreet lorem pellentesque vel. Morbi volutpat, arcu ac ullamcorper scelerisque, libero turpis dignissim ligula, in tincidunt ligula dui ut sapien."];
var cnt = 0; var _X1;
window.onload=function() {
  // replace the click with your event
  document.getElementById("click").onclick=function(e) {
    e.preventDefault();
    if (cnt>=output.length) return;
    if (_X1 == undefined) { // when the window does not exist
      _X1=window.open("", "Test", "width=300,height=300,scrollbars,resizable");
      _X1.document.write('<body>'+output+'</body>'); // create container and add
      _X1.document.close();
    }  
    else _X1.document.body.innerHTML+=output[cnt]; // now we can add
    cnt++
//setTimeout(function() { // if necessary - it is not now necessary to use timeout
  console.log(_X1.document.body.scrollHeight);
  _X1.scrollTo(0,_X1.document.body.scrollHeight);
  _X1.focus();
//},1000); // if using timeout
  }
}
<a href="#" id="click">Add</a>