在不重新加载整个页面的情况下重新执行 js答案

【问题标题】：Re-execute js on back without reloading the whole page在不重新加载整个页面的情况下重新执行 js
【发布时间】：2016-02-12 07:00:40
【问题描述】：

有没有办法在不刷新页面的情况下重新执行 JS？

如果我有一个父页面和一个内页。当内部页面被调用时，它通过 ajax 被调用，替换父页面的内容。当用户点击返回时，我想将它们导航回父页面，而无需重新加载页面。但是，父页面 UI 依赖于 javascript，所以在他们点击返回后，我想重新执行父页面的 javascript。这可能吗？

编辑：这是一些代码。我将我的代码包装在一个函数中，但是你会在哪里以及如何调用这个函数呢？

function executeGlobJs() {
   alert("js reload success");
}

【问题讨论】：

你能给我们一些代码吗？
您想要页面上的整个 JS（也包含在包含的文件中）还是其中的一部分？
使用函数，Luke =)
可能都是js。因为我在一个单独的文件中有 js 插件，我也需要重新执行。
我目前正在尝试将我的 js 包装在一个函数中的方法。但是当用户导航回来时，我将在哪里以及如何调用该函数来触发它？请出示代码。

标签： javascript jquery html ajax

【解决方案1】：

你可以使用 html5 history-api:

在您的click-handler 中，您将调用pushState-方法，stat 存储当前状态以供以后重用：

$(document).on('click', 'a.link', function () {
  // some ajax magic here to load the page content
  // plus something that replaces the content...  

  // execute your custom javascript stuff that should be called again
  executeGlobJs()

  // replace the browser-url to the new url
  // maybe a link where the user has clicked
  history.pushState(data, title, url);
})

...稍后，如果用户浏览回来：

$(window).on('popstate', function () {
  // the user has navigated back,
  // load the content again (either via ajax or from an cache-object)
  // execute your custom stuff here...
  executeGlobJs()
})

这是一个非常简单的例子，当然并不完美！你应该在这里阅读更多关于它的信息：

对于ajax和DOM相关的部分，你应该需要了解一点jQueryhttp://api.jquery.com/jquery.ajax/。（这都是关于神奇的美元符号）

另一个选项是hashchange-event，如果您必须支持旧版浏览器...

【讨论】：

浏览器/设备对此解决方案的支持如何？
有一个叫“caniuse”的网站可以搜索这类问题；）caniuse.com/#search=history
仍在尝试不同的方法。完成后我会将答案标记为完成。谢谢。
@user1389082 好的，如果您有任何问题，请不要害羞地在这里问:)

【解决方案2】：

您可以将所有 javascript 封装到一个函数中，并在页面加载时调用此函数。最终，这将使您能够控制重新执行整个 javascript 而无需重新加载页面。

这是使用任何 concat 实用程序（例如 Gulp）时的常见做法

【讨论】：

我将在哪里/如何调用该函数？作为我体内的内联js？
调用函数可以在任何事件上，我能想到的一些如下 - 在页面加载时作为正文 onload 事件 - 在任何按钮上单击您想要获取上一页的位置 - 在鼠标上单击或者鼠标悬停下面是可以使用的事件列表w3schools.com/tags/ref_eventattributes.asp

【解决方案3】：

如果您想像重新加载页面一样重新加载脚本文件，请查看this。

对于所需的所有其他脚本函数，只需创建一个包装函数，如 @s4n989 和 @Rudolf Manusadzhyan 编写的。然后在需要重新初始化页面时执行该函数。

【讨论】：

我将在哪里/如何调用该函数？作为我体内的内联js？

【解决方案4】：

我相信你正在寻找一个名为

的函数

.preventDefault();

这里有一个链接可以更好地解释它的作用 - https://api.jquery.com/event.preventdefault/

希望这会有所帮助！

编辑：

顺便说一句，如果你想在后面执行JS你可以把脚本包装在里面

$('.your-div').on('load', function(e) {
    e.preventDefault();
    //your JavaScript goes here
}

【讨论】：