Javascript - scroll bottom within another browser/page

Question

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?

Firstly change `"width=300, height=300, scrollbars=1, resizable=1"` to `"width=300,height=300,scrollbars,resizable"`since you cannot have spaces in the parameters in some browsers. Then you need to use the window handle so you can do http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page — mplungjan, Nov 11 '16 at 12:16
w=window.open("http://yourwebsite.com"); setTimeout(function() { w.scrollTo(0,150) }, 1000); — Rajesh Grandhi, Nov 11 '16 at 12:16
var w=window.open("yourwebsite.com");w.scrollTo(0,document.body.scrollHeight); try..This may works. — Rajesh Grandhi, Nov 11 '16 at 12:22
the var "_X1" is the handle for other external browser::page? — M.C., Nov 11 '16 at 12:23
this: "window.scrollTo(0, _X1.body.scrollHeight);" ----------- and this: "_X1.scrollTop = _X1.scrollHeight - _X1.clientHeight;" - doesn't work — M.C., Nov 11 '16 at 12:24
oh not error messages, yes all finished, all printed, that's all ok but seems not "refresh" the page or not accept command... (i use this method for check in real time the functions calling) — M.C., Nov 11 '16 at 12:31
when i click the button about this command, the LINE has been printed, but the SCROLL not — M.C., Nov 11 '16 at 12:32
i see that the PRINT handled command has been accepted, in fact you can see the "words...", but others not — M.C., Nov 11 '16 at 12:34
@mplungjan yes. thanks, our method works perfectly. But erases everything that was written into the page! — M.C., Nov 11 '16 at 12:46
precisely why I use ■".document.body.innerText + output + = '\ r \ n';"■ To prevent it from being erased that which is already written on the page! — M.C., Nov 11 '16 at 12:47
So open the window and create the body then add to the body. I'll show you in a while — mplungjan, Nov 11 '16 at 12:51
so I can not make a print in text mode stream, in the simple main body, if I do not create any particular keyword hooking: type #id #class or ....? ------- ok, thanks i still waiting for, i'm surprised.... — M.C., Nov 11 '16 at 12:58
SOLVED! this is the final code: ---------------------------------- var _X1 = window.open("", "Test", "width=300,height=300,scrollbars,resizable"); _X1 .document.write(output); console.log(_X1 .document.body.scrollHeight); _X1 .scrollTo(0,_X1 .document.body.scrollHeight); — M.C., Nov 11 '16 at 13:05
in this mode, i can have each words printed, without eraser, any time, and even bottom scrolled. Thanks all and special thanks @mplungjan — M.C., Nov 11 '16 at 13:07
Have a look at my answer. The question became too different from the duplicate I found. Your solution is not stable. You need to close the document to render it fully. My solution only use document.write to create the body container to add to — mplungjan, Nov 11 '16 at 13:11

score 0 · Accepted Answer · answered Nov 11 '16 at 13:09

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>

mmm, safe and clear. So then each function has been called, this "printer" run... ok! It work for me then thanks. Only 1 note: █ "_X1.document.close();"█ i don't close up. because if i do, each line start up every time at the top of screen. I use your solution mode. I've learn. tnx — M.C., Nov 11 '16 at 13:52
I know. It creates a new document when you do write after close. My model only writes once and then closes, then next call it just adds to existing document — mplungjan, Nov 11 '16 at 13:56

Javascript - scroll bottom within another browser/page

1 Answers1