我有一个动态网页,需要在另一个javascript文件中导入外部JS文件(在
IF
条件下)。我试图寻找可行的解决方案,但没有没用。
我尝试使用
document.createElement()
将JS文件加载到DOM中,但是也没有用。显然,Js已加载到DOM中,但在当前JS文件中无法访问。jQuery中的解决方案也很好
#1 楼
jQuery的$.getScript()
有时有问题,因此我使用自己的实现方式:jQuery.loadScript = function (url, callback) {
jQuery.ajax({
url: url,
dataType: 'script',
success: callback,
async: true
});
}
并使用它,例如:
if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
//Stuff to do after someScript has loaded
});
评论
我稍微调整了一下脚本,使其在加载时执行,否则加载,然后执行... jQuery.pluginSafe = function(name,url,callback){if(jQuery [name]){callback; } else {jQuery.ajax({...}); }}
–特里·里格尔(Terry Riegel)
2015年4月8日14:40
您可以提供有关何时出现越野车的信息吗?
–user151496
16-2-16在12:14
这不是理想的,因为这样加载的文件未在DevTools的“源”中显示。这是因为该文件被逃避了
–万安
17年1月30日在21:36
另一个问题是,这将吞噬所有语法错误。因此,您想将它们捕获在fail()中。
–万安
17年1月31日在1:25
我不想使用JQuery。有纯JS方式吗?
–canbax
1月10日6:00
#2 楼
我的猜测是,在仅DOM的解决方案中,您执行了以下操作:var script = document.createElement('script');
script.src = something;
//do stuff with the script
首先,这将无法正常工作,因为脚本未添加到文档中树,因此不会被加载。此外,即使这样做,在加载另一个脚本时也会继续执行javascript,因此在该脚本完全加载之前,其内容将不可用。
您可以收听脚本的
load
事件,然后按您的意愿处理结果。因此:var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = something;
document.head.appendChild(script); //or something of the likes
评论
过度复杂化毫无意义。喝彩
–深度元素
2015年11月6日17:39
确保在onload属性源之后设置src属性
– woojoo666
16年4月30日在0:04
这确实应该是最好的答案,无需将jQuery用于此类简单任务!
–马修
17 Mar 4 '17 at 23:06
@ woojoo666为什么在加载后?仅在appendchild之前设置src是否足够?
– A-Sharabiani
17年8月16日在19:08
@AliSharabiani哎呀,您是对的,仅在元素已在页面上才重要。根据我的经验,在设置src之前首先在页面上放置元素比较常见,主要是在所有要动态更改src的情况下,例如img标签等。所以我认为最好的方法是习惯于在onload之后放置src
– woojoo666
17年8月17日在17:57
#3 楼
我需要经常执行此操作,因此请使用以下命令:var loadJS = function(url, implementationCode, location){
//url is URL of external file, implementationCode is the code
//to be called from the file, location is the location to
//insert the <script> element
var scriptTag = document.createElement('script');
scriptTag.src = url;
scriptTag.onload = implementationCode;
scriptTag.onreadystatechange = implementationCode;
location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS('yourcode.js', yourCodeToBeCalled, document.body);
有关更多信息,请参见本网站。如何在另一个JavaScript文件中包含一个JavaScript文件?是我的功能思想的源泉。
评论
因包含onload而被投票。
– henrykodev
17年12月6日在1:30
这段代码很棒。只需很少的修改即可使其在chrome / firefox / opera上完全起作用。我用6行html编写了自己的markdown重写器,该HTML加载了markdown脚本。对于内容,我添加带有markdown的标签。重写器将markdown转换的结果附加到HTML。简直很美。谢谢。
– jlettvin
18年3月13日在22:00
多一点的工作,我将所有html减少到3行。具有内容的标记被转换并附加。比我以前的任何努力都要好。
– jlettvin
18年3月13日在22:28
<!DOCTYPE html> head>
评论
您正在尝试通过这样做来实现什么(以便可以提出替代方案)?我正在创建一个动态页面。有条件地显示一些效果。但是外部JS不能永久包含在HTML中
另请参阅:jspatterns.com/the-ridiculous-case-of-adding-a-script-element
angulartutorial.net/2015/06/…