php – 如何在单页Web应用程序中处理多个脚本

开发技术 作者: 2024-07-04 00:55:01
我是Web开发的新手,我开始了一个应用程序,我有一个带有菜单的index.php和一个名为#content的div,我使用load()将所有不同的页面加载到div #content中;我需要加载相应的 java脚本文件以及正在加载到div #content中的文件. 问题:这里在加载到div的HTML中,我有一些类似的类名和id,所以当我点击任何菜单项并在那里执行一些操作并转到另一个菜单项并执行相
我是Web开发的新手,我开始了一个应用程序,我有一个带有菜单的index.PHP和一个名为#content的div,我使用load()将所有不同的页面加载到div #content中;我需要加载相应的 java脚本文件以及正在加载到div #content中的文件.

问题:这里在加载到div的HTML中,我有一些类似的类名和id,所以当我点击任何菜单项并在那里执行一些操作并转到另一个菜单项并执行相同的操作时,我得到的脚本上一个菜单项正在执行!

是否有更好的方法将菜单项中的脚本加载到div中,然后单击另一个菜单项删除以前的脚本并从当前菜单项中加载新脚本?

我用来加载div #content的脚本:

$('.nav-button').on('click',function(e){
e.preventDefault();
$('#content').load('../scripts/loader.PHP');
$('#content').load($(this).attr('href'));
});

sample1.PHP页面我加载到menu-item1上的div点击:

<div id='datagrid'>
<input></input>
<input></input>
<input></input>
</div>
<script type='text/javascript' src='scripts/menu-item1/data_script.js'></script>

sample2.PHP页面我加载到menu-item2上的div点击:

<div id='datagrid'>
<input></input>
<input></input>
<input></input>
</div>
<script type='text/javascript' src='scripts/menu-item2/data_script.js'></script>

解决方法

另一种加载脚本的方法:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = src;
script.onload = callback_function;

document.getElementsById("#scriptContainer")[0].appendChild(script);

关于删除现有脚本:

尝试在特定容器中加载脚本,当您想要替换它们时,只需清除容器内容并加载新脚本即可.

您还可以尝试使用requirejs进行延迟加载. Example here

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_38162.html