Primarily for the sake of learning I would like to redirect myself to another webpage and then, in that new webpage, get an alert() message.
Can I do that with a single JavaScript document?
I mean, can I run both commands from the same document?
In a glimpse, I understand that I can’t, because if one runs the following code, the alert() will run before the setTimeout() and not after it in the new webpage (which I find a bit odd because the window is the same window and only the webpage was changed).
You want to redirect from page A to page B. After the redirect has taken place and page B has loaded, you want to execute JavaScript from page A in the context of page B.
That’s not possible, I’m afraid. If we are talking about a full page refresh (and not some kind of JS-based routing) then page B has no concept of page A.
You could hack around this by passing a query string to page B, but that’s probably not what you are trying to do.
There are different ways of persisting data, like in the query string, post data, cookies, window name or HTML5 local storage, but all those methods can only persist string values, not Javascript objects.
freakish said:
I believe that the only way to pass a javascript object from one page to another is to serialize it into string and pass it in url.
thomasrutter mentioned “local storage”.
Also based on answer by Robert Koritnik’s, I guess local storage or cookies are good ways to do that.
Sadly non of the answers there include an example of actual local storage of a command.
Would the command be locally stored as a string? Let along, how this command should be POSTed(?) into the next page.
Is there any tutorial here which I might take in these subjects? I basically just want to know how to pass the alert() to the next page.
Right. You would store a string of alert("Hi"); in local storage on page A, then on page B, retrieve the string from storage and use eval to execute it.
However, this is a security risk and likely a bad idea (see the warning on the MDN page). While what I described should work, there is nothing to stop a bad actor adding random JavaScript to local storage on page A and then having it executed on page B.
It would be better to pass a query sting in the URL, e.g. https://whatever.com/page_b.html?message=hi and then parse the query string on page B and alert the message.
And even if alerting a message is just a “dummy” command and you are trying to do something more complicated, there is very probably a better way to do that as well.
Right. This is how JS works. The setTimeout is non blocking so the JS interpreter will not wait for the timer to run before executing the alert.
Also, any code which comes after window.location.href = 'https://algeriatimes.com'; will not be executed, as you will have navigated away from the page you were on.
HTTP is a stateless protocol which means that each request made from a client to a server is processed independently of any other request. In other words, the server doesn’t remember anything about the client between different requests.
And even if alerting a message is just a “dummy” command and you are
trying to do something more complicated, there is very probably a better way to do that as well.
Do you mean that there is a better way even than query strings?
HTTP is a stateless protocol which means that each request made from a client to a server is processed independently of any other request. In other words, the server doesn’t remember anything about the client between different requests.
I think that between different requests you probably meant between different backend requests.
Let’s say that instead of local storage, string and eval I do it with query strings.
Should I pass any query string to the next webpage by XHR/FetchAPI/AJAX?
As I only want to pass alert() I guess any elementary tutorial with XHR/FetchAPI/AJAX would suffice, I just don’t know which has the shortest syntax or best way to pass on query strings.
Not really. I mean that what you are trying to do (execute JavaScript from page a in the context of page b) is not possible. However, it might be that you have a different use case in mind and that that could be solved in a better way than what you are trying to do.
This makes the browser load the page located at https://algeriatimes.com. It requests this page from a server, therefore a “backend request”.
Nope. window.location.href will do a full page refresh. No Ajax involved.
Here is an article on how to work with querystrings:
But TBH, it seems like you are mixing your concepts a little (or something is getting lost in translation). I would recommend giving yourself a brief refresher of what happens where. For example:
Depending on the length of the script you could also write two separate userscripts and have one execute when the URL matches the first pattern and the second execute when it matches the second pattern.
Makes sense.
That can’t go at the front.
It would be something like:
window?.location?.href
But the window is always going to have those properties, so it is not necessary.
if (window.location.href.includes(/[0-9][0-9][0-9]/edit) ) {
do stuff;
} else if (!window.location.href.includes(/[0-9][0-9][0-9]/edit) ) {
do stuff;
}
I have hundreds of webpages in my personal website and currently all webpages are page/200 or page/305 or page/716 etc. in the URL, so given that datum, is it better to do it this way with regex and negation (I mean !window instead just window)?
