重定向后JS不起作用

Question

我正在使用 apppresser 构建一个 WordPress APP，我想使用一个简单的 JS 文件来隐藏菜单图标，仅在一个页面中。

当用户登录时，他将被重定向到此页面。 JS 我写过作品，但是当用户登录后重定向到此页面时，JS 似乎不起作用。

似乎在重定向后它丢失了页面引用。

有用的文档： https : //docs.apppresser.com/article/392-custom-javascript

我创建了一个这样的自定义 html 页面，并为 div 分配了一个自定义 ID：

<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>

我的JS是：

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;
   }
  }

我做了2次尝试：

当我直接点击菜单进入页面时，菜单图标按预期禁用。

但是当我登录后重定向到此页面时，代码不起作用。

问题可能是重定向速度更快并且没有时间加载页面？

感谢帮助。

Answer 1

apppresser 使用 Angular 框架来构建单页应用程序。 单页应用程序“伪造”页面加载。

您的自定义 JavaScript 在应用程序启动时被加载，并立即运行。 当您在登录页面之后到达您的 html 页面时，JavaScript 已经在登录页面上运行，并且不会在您的 HTML 页面上再次运行。

您在自定义 JavaScript 中放入的任何代码都只会在应用程序启动时运行一次。

在您的情况下，您可以通过在自定义 HTML 页面中放置隐藏图像来伪造加载：

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

并在您的自定义 JavaScript 中声明函数disableMenuToggle和enableMenuToggle 。

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

（Img 因为 onload 事件仅由少数几个 HTML 元素触发，而 img 就是其中之一）

编辑：当 JavaScript 运行时，您的自定义 HTML 也不会“准备好”，因此对于这部分，不要使用提供的 ready 函数，也不要在 body 元素上使用它。