0

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?

TheMaster
  • 45,448
  • 6
  • 62
  • 85
ajor
  • 1,592
  • 7
  • 22
  • 40

1 Answers1

2

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

TheMaster
  • 45,448
  • 6
  • 62
  • 85
  • Thanks, that makes a bit more sense. I've looked at the sample web app and cannot replicate it (I need to do it without jQuery). As I understand it, this sets the base URL to be the script URL, appends a fragment via the href, which triggers the handler? When I implement this I get an error saying "Refused to display 'https://script.google.com/a/macros/xxx/s/xxx/dev#page1' in a frame because it set 'X-Frame-Options' to 'sameorigin'." – ajor Mar 22 '20 at 19:54
  • @apk Set base target to _top – TheMaster Mar 22 '20 at 21:31