Handling History Changes In Google Apps Script Web App - javascript

I'm building a web app using Google Apps Script, looking to replicate a multi-page site, and struggling to get the history changes to do what I want.
I have links set up with event listeners that use google.script.history.push() like this:
document.getElementById('navPage1').addEventListener('click', function() {
google.script.history.push({timestamp:new Date().getTime(),page:'page1'}, {page:'page1'})
});
When I click on this link, I see the URL update accordingly with the parameters (i.e. to https://script.google.com/a/XXX/macros/s/XXX/dev?page=page1).
In my HTML file I then want to use google.script.history.setChangeHistory() to detect these changes and load content accordingly. However, the event doesn't seem to be triggering at all. I currently have it set up just to log on history change, and I'm not seeing anything at all:
google.script.history.setChangeHandler(function(e) {
console.log('History Change Triggered');
});
Have I misunderstood how these should be used?

As written in the documentation,
Calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by performing a browser action, such as clicking on the back button (or calling history.back() in JavaScript), when navigating between two history entries for the same document.
Related Answer:
Sample web app

Related

Adding a listener to webNavigation, in a chrome extension's background script everytime a url matching a pattern is visited

I am trying to add a listener in the background.js file of a chrome extension.
I want this listener to ideally be filtered only for url's matching, for example, netflix.com/watch/
First, I tried chrome.webNavigation.onCompleted.addListener (link), supplying an appropriate filter for the desired netflix URL. However, I've observed that this listener doesn't fire if the URL is navigated to via the browser's forward or backwards buttons. Also, it doesn't seem like the listener fires if the navigation originates from clicking a link on a webpage from the same domain (ie: clicking on a Netflix video while browsing or searching (taking you from netflix.com/browse to the targeted netflix.com/watch URL)).
I then tried chrome.tabs.onUpdated (link). This event fires with the backward/forward buttons, and also fires when navigating from a page of the same domain, but, it doesn't fire when refreshing the same page (since the tab doesn't change in this case). Preferably I would like to handle the refresh case as well.
I could use both listeners to cover each listener's omissions, but there are cases where both will fire at the same time, which isn't desirable.
Is there an event I can listen for that will cover all the situations I described?
chrome.tabs.onUpdated is actually fired when refreshing a tab so your code is incorrect. I guess it looks for changeInfo.url which is not provided on refresh.
Look at status as well and use url or pendingUrl from the tab parameter:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (info.url || info.status === 'loading') {
const url = info.url || tab.pendingUrl || tab.url;
console.log(url); // prints in the *background* console
}
});
For webNavigation with SPA (Single-Page Application) sites like netflix/youtube you need to listen to more events: onHistoryStateUpdated, onReferenceFragmentUpdated.

What can be the event similar to onpopstate that works across documents?

From mozilla docs:
A popstate event is dispatched to the window every time the active
history entry changes between two history entries for the SAME
DOCUMENT.
Which window event should i use if i need to listen to 'session history changes' ACROSS DOCUMENTS in a browsing context?
I am writing a js library that helps tracking navigation when user use back/forward browser buttons. The library would record when user is navigated from page B to page A (backwards) or page A to page B(forward). I've achieved the tracking for the pages that use hashes using the 'popstate' event but when user navigate from page A to page B this event doesn't work.
I've looked at pageshow/pagehide events but they fires on simple page loads as well and not just when the 'session history' changes (ie page fetched from history).
What should i be looking at to know "browser has looked into session history to fetch the current page"?
You're going to have to handle the Window's beforeunload event, and also put code on whichever page loading event is appropriate for your use case.
Note that for beforeunload, you don't have time to write something server-side. You'll have to track this in LocalStorage.
There is something weird in your requirements:
You say you are writing a js library, but for this library to work across different documents, for a start, it would at least have to be executed on every documents navigated by the user.
And even if it were the case, there wouldn't be any solid way to do what you want.
Browsers' behavior regarding history navigation vary a lot:
For instance, FF will keep in memory its current state, and will not reload the page per se, but simply reactivate its saved state (i.e you won't even be able to know that the user came back to this page (apart from ugly polling of performance.navigation.type, which despite what MDN says is only absent in Safari).
So all in all, what you want to make is a job for a browser extension, not for a web-library.

How to abort browser reload/refresh in ember

I am not sure how you can abort a browser reload using ember's route events. The willTransition event only gets triggered when you click the back button or just change the route. I have not been able to find how I can stop page reload for example while an upload is still in progress.
You can listen to beforeunload on the window element. This at least allows to present a "Do you really want to leave" like popup by the browser. See documentation on MDN. Some browsers even allow to show a custom message.
There also is an ember addon for this: ember-onbeforeunload.
See the addons route mixin for how this works.

Can I "catch" a redirect executed by a script, with javascript eventListeners?

I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest

PageVisibility API - Change in browser console tab to act like active

I am parsing some data from some website. The problem is that the data stops refreshing if browser tab for this page is not opened. I guess they use Page Visibility API.
Is there any way how to manually change page visibility status through console? So basically I want the page to act like my browser tab is active and not minimized.
Visibility api probably listens for events. When events trigger the page become visible/invisibile. You can create a synthetic event and thus trick the api. Depending on which events api uses you can try something like this:
e = document.createEvent("HTMLEvents");
e.initEvent("focus", false, true);
window.dispatchEvent(e)
If focus doesn't work, try to simulate events from wiki.

Categories