In fact, the above JS can be blocked because the framer can block execution of JS.
So a better approach is to use CSS to hide the page by default,
and only show it with JS
if it is the top.
If you use a page regularly, and its functionality frustrates you, then use the console to edit their page!
How to change link colours (on another site)
Say you are struggling to see which links you have visited (and which you have not) on someone else's site.
You can use JS to insert CSS / change CSS of the page!
Obviously you are not changing it for other people.
You are only changing your view in your browser.
In our example, to change color of visited links, open console, and type something like:
Say a site has a page you use regularly, with lots of links. And you want to explore links but keep the page in the browser.
So you find you do a lot of right-click - Open in New tab.
It might be worthwhile to edit the page so every link opens in new tab. No more right-clicking.
Ideally, need this in the page head:
However, the page has already loaded.
So we use JS to "fix" the page.
Go to console.
Copy and paste this:
var b = document.createElement('base');
b.target = "_blank";
Now every link click opens a new tab.
Move CPU load onto client
without burdening the server.
Good (for both client and server) to move CPU load onto client. Why?
Most JS can be moved to separate files.
But some JS may remain mixed with the HTML.
Consider how to assign a JS function to a HTML element like a button.
First method: Assign it in the HTML definition.
<button onclick='fn();' >Go</button>
Second method: Assign it separately.
We have pure HTML in the page:
<button id='thebutton' >Go</button>
and we assign the event separately in JS when the page has loaded: