gpt4 book ai didi

javascript - 动态加载的局部页面调用的JS应该如何加载/卸载?

转载 作者:行者123 更新时间:2023-11-30 05:42:55 29 4
gpt4 key购买 nike

我使用 jQueryhistory.js 来管理部分页面之间的动态转换;这样我就可以避免重新加载整个文档。其中一些部分页面调用自己独特的 javascript 文件。虽然页面之间的转换运行良好,但在调用它的部分页面被动态替换后,已执行的 javascript 的剩余部分仍保持事件状态。

如何卸载随动态页面加载引入并随后被另一个页面异步替换的 javascript


更详细的信息

主模板

我的主模板(用于所有页面)可以被认为是一个简单的:

<html>
<head>
<script>
//scripts to manage asynchronous loading of partial-pages into #content div
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>

用户个人资料

#content div 中呈现的一个部分页面用于用户的个人资料:

<script src="profile.js"></script>
<form>
<input type="file" name="profile-picture">
</form>

profile.js的内容类似于:

$(function() {
$('input').change(function() {
// upload profile picture asynchronously
});
});

用户设置

主模板#content div 中加载的另一个部分页面是用户的设置:

<script src="settings.js"></script>
<form>
<input type="text" name="first-name">
<input type="text" name="last-name">
</form>

settings.js的内容类似于:

$(function() {
setInterval(function() {
// auto-submit form every 10 seconds
$('form').submit();
}, 10000);
}
});

问题

  • 某些 javascript 函数在调用它们的部分页面被另一个替换后继续运行(例如 setInterval)。
  • 为每个部分页面加载新的 javascript 感觉很乱;但就我的生活而言,我找不到任何关于最佳实践的建议。

在允许每个部分页面使用特定于页面的脚本的同时实现这种动态部分页面加载/卸载效果的更好方法是什么?

谢谢!

最佳答案

首先......一旦你加载了javascript......你就无法卸载它

setInterval 问题需要使用clearInterval

在初始化 setiIterval; 时,声明一些深奥的名称,使其作为全局变量相当独特;确保在 $(document ).ready 使用前

var my_super_form_submitter

$(document.ready)function(){...
my_super_form_submitter=setInterval(func.....

然后每当你加载一个新页面

if(my_super_form_submitter)
clearInterval(my_super_form_submitter)

至于与其他方法的冲突....您可以为页面特定代码采用内容类协议(protocol)。在每次加载页面时,更改内容 div 的类...然后在 jQuery 的选择器中使用该类

关于javascript - 动态加载的局部页面调用的JS应该如何加载/卸载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19719147/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com