Open .txt file and scroll to the bottom of it in JavaScript

Question

My question is identical to the following question, except I want to open the .txt file in the SAME tab/window, not a new tab/window:

How to automatically scroll to the bottom of a text file window?

Can the solution be modified in some way to still work, only in the same tab/window?

I tried changing _comments to _self but then the scroll ceased to occur.

You can set a global variable at `window`, for example `localStorage` or `history`, then use `load` event of `window` to perform task when new content is loaded, see [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — guest271314, Nov 02 '17 at 19:56
Depending on CORS issues, you could load your content using AJAX, then write the HTML you need, wrapping the txt content in a "pre" tag and scrolling when you're done. — theGleep, Nov 02 '17 at 19:56

Qrchack · Accepted Answer · 2017-11-02T21:05:12.293

The answer you mentioned uses Window.open(). From MDN:

The Window interface's open() method loads the specified resource into the browsing context (window or tab) with the specified name. If the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.

Syntax
var window = window.open(url, windowName, [windowFeatures]);
Parameters

url

A DOMString indicating the URL of the resource to be loaded. This can be a path or URL to an HTML page, image file, or any other resource which is supported by the browser. If the empty string ("") is specified as url, a blank page is opened into the targeted browsing context.

windowName

A DOMString specifying the name of the browsing context (window or tab) into which to load the specified resource; if the name doesn't indicate an existing context, a new window is created and is given the name specified by windowName. This name can then be used as the target of links and forms by specifying it as the target attribute of or elements. The name should not contain whitespace. Keep in mind that this will not be used as the window's displayed title.

_comments is just a random name that's supposed to be not used so that it's opened in a new window. You can't use that function. To open in the same window/tab you'd need to use something else, for example Window.location

The Window.location read-only property returns a Location object with information about the current location of the document.

Though Window.location is a read-only Location object, you can also assign a DOMString to it. This means that you can work with location as if it were a string in most cases:

location = 'http://www.example.com'

is a synonym of

location.href = 'http://www.example.com'

Example #1: Navigate to a new page

Whenever a new value is assigned to the location object, a document will be loaded using the URL as if location.assign() had been called with the modified URL. Note that security settings, like CORS, may prevent this to effectively happen.
location.assign("http://www.mozilla.org"); // or
location = "http://www.mozilla.org";

However, once you load a .txt file, your JavaScript is gone. So loading a plain .txt file in the browser is probably not the best idea. If you're using jQuery, consider creating a <div id="textfile">. You can place the text file contents inside it by doing:

$("#textfile").load("file.txt", function() {
    // do your scrolling here
});

In terms of scrolling through it, in plain JS it's tricky. If you're using jQuery, there's jquery.scrollTo. You'll be able to use any of the following in your function then:

$.scrollTo("250px");
$.scrollTo("50%");
$.scrollTo("+=25px");
$.scrollTo("max");

The resulting webpage (when using jQuery's `.load` feature) displays the contents of my .txt file, except all newlines from my .txt file have been removed. It smushes all the text together into one paragraph. Do you know how to fix this? Thanks — Crickets, Nov 02 '17 at 20:34
Add `white-space: pre-line;` to `#textfile` in your CSS, this removes the need to add useless
tags and handles newlines automatically — Qrchack, Nov 02 '17 at 20:57
That solved the issue. I've tested your solution and found that your suggested code, including `.scrollTo`, produces the outcome I'm looking for. Thanks — Crickets, Nov 02 '17 at 21:15

Open .txt file and scroll to the bottom of it in JavaScript

1 Answers1