Js not works after redirect

Question

I'm using apppresser to build a WordPress APP and I would like to use a simple JS file to hide menu icon, in one page only.

When a user logs in, he is redirected to this page. JS I have written works, but when a user is redirected to this page after login, JS does not seem to be working.

It seems that after the redirect it loses the page reference.

Useful docs: https://docs.apppresser.com/article/392-custom-javascript

I have created a custom html page like this, and assigned a custom ID to div:

<img src="https://pathimage.com" onload="disableMenuToggle()" onbeforeunload="enableMenuToggle()" style="height:0px;width:0px; position:absolute;" />
<div id="pianoscaduto">
<button ion-button (click)="openPage('login-modale')">
<ion-icon name="ios-arrow-dropright" item-left></ion-icon>
  FAI IL LOGOUT
</button>
</div>

My JS is:

function disableMenuToggle(){
 var menutoggle = document.getElementsByClassName( 'bar-button-menutoggle' );
if ( menutoggle.length > 0 ) {
        menutoggle[0].disabled = true;
   }
  }

function enableMenuToggle(){
 var menutoggle = document.getElementsByClassName( 'bar-button-menutoggle' );
if ( menutoggle.length > 0 ) {
        menutoggle[0].disabled = false;
   }
  }

I made 2 tries:

When I go to page directly clicking on menu the menu icon is disabled as expected.

But when I get redirected to this page after login, the code does not work.

Can the issue be that the redirect is faster and does not have time to load the page?

Thanks for help.

Answer 1

apppresser uses the Angular framework to build a single-page application. Single page applications "fake" page-loads.

Your custom JavaScript is being loaded when the app starts, and is run immediately. When you arrive at your html page after the login page the JavaScript already ran on the login page and is not run again on your HTML page.

Whatever code you put in the custom JavaScript will only be run once, when the app starts.

In your case you can fake an onload by putting a hidden image in your custom HTML page:

<img src="logo.png" onload="window.disableMenuToggle()" onbeforeunload="window.enableMenuToggle()" style="height:0px;width:0px; position:absolute;" />

And declare the functions disableMenuToggle and enableMenuToggle in your custom JavaScript.

window.disableMenuToggle = function () {
  var menuToggle = document.getElementsByClassName("bar-button-menutoggle")
  if (menuToggle.length > 0) {
    menuToggle[0].disabled = true;
  }
}
// repeat for enable...

(Img because onload events are only triggered by a select few HTML elements and img is one of them)

Edit: your custom HTML also won't be "ready" when the JavaScript runs, so for this part don't use the provided ready function, or use it on the body element.