javascript - 通知主页面外部js改变的变量

Question

我正在尝试为我正在开发的一些网页创建模块化登录脚本。简而言之，我在主页上加载脚本，通过按下按钮触发主登录功能，并在主页上创建由外部 signIn.js 管理的覆盖 div。外部js设置了一些sessionStorage变量，这些变量将在主页面中使用。

模块化的希望是让 signIn.js 处理来自数据库的身份验证，并让主页根据需要处理登录过程(在这个特定实例中，它允许用户访问他们的项目)。理想情况下，登录不会由于其他项目目标而强制刷新主页。

我遇到的问题是，如何在不破坏任何模块化感觉的情况下通知主页用户已登录？

在其他努力之上，最有希望的是尝试使用 $(document).on('userSignedIn', function() {...}); 在主页的文档上创建自定义事件。但是 signIn.js 显然不能触发这个事件。

关于如何完成此操作的任何建议，或者我只是在做这件事完全错误吗？

编辑:
所以，这绝对是我遇到的范围相关问题。为了充实该过程，如果有人认为它相关，signIn.js 会向 mainPage.html 添加一个覆盖 div。 $("#signInContainerDiv").load("signIn.html")用于将登录表单加载到页面中。事实证明，当我试图引用 $(document) 时，它使用的是 signIn.html 的文档，而不是 mainPage.html 的。意识到这一点后，我刚刚在主页面上创建了一个 div (signInNotify)，我将事件绑定(bind)到 ( $("#signInNotify").on("userSignedIn", function() {...}); ) 并在 signIn.js 中触发它。

我自己的缺乏经验再次征服了我。

Answer 1

jQuery 可以帮助您解决这个问题。下面是 trigger

主页的示例

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

jQuery Page Reference