如何运行使用javascript动态加载的脚本
我想知道是否有办法在ajax动态加载的内容中执行脚本。 我搜索过网络,这个论坛也找到了很多答案,比如
[ 在ajax加载的页面片段中 运行脚本 [1]: 在加载ajax的页面片段中运行脚本 [1]
但这似乎都不适合我。 我没有作为引用post的作者的经验,所以也许我们可以找到一个更简单,更适合每个人的解决方案。
就目前而言,我已经实施了一个棘手的转变,这对于大部分硬编码解决方案来说都是有趣的:
//EXECUTE AJAX REQUEST LET'S SAY SUCCESSFULLY, $ajax([..]) //THEN .ajaxSuccess(function(){ // LOCATE ANY OBJECT PRE-MARKED WITH A SPECIFIC CLASS $(".script_target").each(function() { //DO SOMETHING BASED ON A PRESET ATTRIBUTE OF THIS SPECIFIC ELEMENT //EXAMPLE:
...//WILL FIRE A SCRIPT RELATED TO drop_down CASE. }); });
我知道这是一个丑陋的解决方案,但我没有想到比这更好的了。 你能帮忙改进这种方法吗? 也许有办法让浏览器自动在加载的页面中激活脚本?
PS。 如果它不是最后一个解决方案,我将不会使用eval()方法,导致安全漏洞和全局减速,并且要注意启动的脚本需要修改加载在脚本的同一片段中的对象。
提前致谢。
如果我理解正确的话:
- 使用“load”从服务器检索html内容,然后将其添加到页面。
- 之后,你进行ajax调用,并且在返回ajax调用时,你想对你之前添加的标记采取行动
- 但是,根据检索到的标记,您希望在ajax回调中执行不同的操作
另外一个问题是:在加载标记之前,您是否知道它背后会有什么逻辑,或者您是否真的需要“读取”返回的HTML以了解它将用于什么?
否则也许这样的事情会起作用:
- 在“$ .load”函数的回调中,使用$ .data()将更多信息附加到创建的dom对象
- 在ajax回调中,您应该能够访问“添加”标记(如同可能的那样使用类,或者使用id),并读取“数据”以了解您应该具有的行为?
希望我能解决你的问题,如果你能够创建一个jsfiddle或其他东西,它可能有所帮助,只是为了确保我们理解它。
希望这会有所帮助。
编辑:在您的评论之后,它可能与您在调用$ .load()时使用的选择器有关。
$ .load文档中有一个“脚本执行”部分: http : //api.jquery.com/load/ ,它解释了如果在URL中添加选择器,则不执行脚本,如下所示:
$('#b').load('article.html #target');
这可能是你的问题吗?
此外,如果可能的话,您可以尝试更改您的站点,以便不是在页面内部拥有库的每个“页面”的js代码,而是将其放在一个单独的javascript文件中,即在运行时加载(例如,需要js)。
这样,“加载”页面将是这样的:
$.load("url_of_a_page_markup.html", function () { require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) { TheJsModuleForThePage.doSomething(); }); });
如果以一致的方式构建JS模块,并为markup和js文件的名称定义约定,则可以对事物进行概括,以便“gallery”管理器处理所有这些代码加载,并且最终会得到每页都有很好的隔离js模块。
希望这会有所帮助。
如果要在ajax加载的页面片段中运行脚本,可以使用try尝试使用jQuery.load函数。
您是否考虑过像require.js或Lab.js这样的模块加载器?
还有很多人问类似的问题:
- 有没有人知道好的ajax脚本加载器
- 在ajax调用之后加载脚本的位置在哪里?
- 动态地通过ajax获取jQuery脚本和内容
- JS中的动态脚本加载器
编辑 :我想我误解了你的问题。 将尝试并提出一个更好的答案。 抱歉!
祝你好运!
当我动态加载一些HTML以在JQuery UI对话框(我的应用程序的帮助function)中使用时,我遇到了同样的问题。
$('#helpMessage') .load('./help/' + helpFile, function () {...do stuff after loading});
为简单起见,我想在我加载的HTML片段中组合与帮助页面相关的独特脚本。 使用JQuery UI页面上的示例,我创建了一个带有Jquery UI按钮元素的对话框。
jQuery UI Button - Icons This is my help file, this is my code. This is for reading, this is for fun.
将加载对话框并显示HTML,但嵌入式脚本未执行。
我意识到一个简单的改变就能解决它。 该脚本嵌入在匿名函数中(最佳实践和JQuery UI演示代码的一部分)。 通过立即调用匿名函数,我将HTML片段加载到主页面时执行该脚本。
这个:
变成了:
美好的事物。