如何运行使用JavaScript动态加载的脚本 [英] How to run scripts loaded dynamically with javascript
问题描述
我想知道是否有一种方法可以在ajax动态加载的内容中执行脚本. 我在网上搜索了该论坛，也找到了很多答案，例如
I was wondering if there is a way to execute script within a ajax dynamically loaded content. I've searched the web and this forum also an find a lot of answers, like
[在ajax加载的页面中运行脚本片段 [1]:在加载了ajax的页面片段中运行脚本 [1]
[Running scripts in an ajax-loaded page fragment [1]: Running scripts in an ajax-loaded page fragment [1]
但是，这一切似乎都不适合我. 我没有被引用的文章的作者的经验，因此也许我们可以为每个人找到更简单，更完全的解决方案.
But none of this seems to work fine for me. I'm not experienced as the author of the quoted post, so maybe we can find a solution more simple and quite for everyone.
目前，我已经实施了一个棘手的周转措施，使很多硬编码的解决方案都闻起来了:
For now i've implemented a tricky turnaround that smell to much of an hard-coded solution that is:
//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: <div class=".script_target" transition="drop_down">...</div>
//WILL FIRE A SCRIPT RELATED TO drop_down CASE.
});
});
我知道这是一个丑陋的解决方案，但是我没有想到比这更好的了. 您可以帮助改进此方法吗? 也许有一种方法可以让浏览器自动在加载的页面内触发脚本?
I know this is an ugly solution but i didn't came up with nothing better than this. Can you help to improve this method? Maybe there's a way to let the browser fire script within the loaded page automatically?
PS.如果不是最后一个解决方案，我将不使用eval()方法，这会导致安全漏洞和全局运行速度降低，并且请注意，启动的脚本需要修改在脚本的同一片段中加载的对象.
PS. I'm not going to use the eval() method if it's not the last solution, cause both security leak and global slowdown, AND be aware that the script launched need to modify objects loaded in the same fragment of the script.
谢谢.
推荐答案
如果我对您的理解是正确的:
If I understand you correctly :
- 您使用加载"从服务器检索html内容，然后将其添加到页面中.
- 之后，您进行了ajax调用，并且在ajax调用返回时，您想要对之前添加的标记进行操作
- 但是，根据检索到的标记，您想在ajax回调中做一些不同的事情
另一个问题:在加载标记之前，您是否知道标记背后的逻辑，还是您实际上需要读取"返回的HTML来了解其用途?
So another question : before you load the markup, do you know what logic will be behind it, or do you actually need to "read" the returned HTML to understand what it will be used for ?
否则，也许这样的事情会起作用:
Otherwise maybe something like this would work :
- 在"$ .load"函数的回调中，使用$ .data()将更多信息附加到创建的dom对象上
- 在ajax回调中，您应该能够访问添加的"标记(使用与您一样的类，或者如果可能的话使用ID)，并读取数据"以了解应该具有的行为?
希望我能解决您的问题，如果您能够创建jsfiddle之类的东西，或者只是为了确保我们理解它，这可能会有所帮助.
Hopefully I got your problem right, it could help if you were able to create a jsfiddle or something, just to make sure we understand it.
希望这会有所帮助.
注释之后，它可能与调用$ .load()时使用的选择器有关.
EDIT : After your comment, it might be related to the selector you use when calling $.load().
$.load文档中有一个脚本执行"部分: http://api.jquery. com/load/，这说明如果在URL中添加选择器，则脚本不会执行，如下所示:
There is a "Script Execution" section in the $.load documentation : http://api.jquery.com/load/ , that explains that the scripts are not executed if you add a selector in the url, like this :
$('#b').load('article.html #target');
这可能是您的问题吗?
此外，如果可能的话，您可以尝试更改站点，以便将画廊的每个页面"的js代码放在页面内，而不是将其放在单独的javascript文件中，然后在运行时加载(例如与require js).
Also, if possible, you could try and change your site so that instead of having the js code of each "page" of the gallery inside the page, you put it inside a separate javascript file, that you load at runtime (for example with require js).
这样，加载"页面将类似于:
This way, "loading" a page would be something along the lines of :
$.load("url_of_a_page_markup.html", function () {
require(["url_of_the_javascript_module.js"], function (TheJsModuleForThePage) {
TheJsModuleForThePage.doSomething();
});
});
如果以一致的方式构造JS模块，并为标记和js文件的名称定义一个约定，则可以将其概括化，以便图库"管理器处理所有这些代码加载，您将最终为每个页面提供隔离良好的js模块.
If you structure your JS modules in a consistent way, and you define a convention for the name of markup and js files, you can generalize things so that a "gallery" manager deals with all this code loading, and you'll end up with well isolated js modules for each page.
希望这会有所帮助.
这篇关于如何运行使用JavaScript动态加载的脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
