110

我有一个html页面,我在其中通过如下javascript动态添加html

<script type=“text/javascript”src=“/myapp/htmlCode”></script>

我想调用一个js函数,例如loadedContent();一旦上述脚本添加了动态html。

有人能帮我怎么做吗?

8个答案8

重置为默认值
180

您可以在不使用head.jsjavascript的情况下实现这一点。

函数loadScript(url,回调){var script=document.createElement(“script”)script.type=“text/javascript”;if(script.readyState){//仅IE<9需要script.onreadystatechange=函数(){if(script.readyState===“已加载”||script.ready State===”complete“){script.onreadystatechange=空;回调();}};}else{//其他script.onload=函数(){回调();};}script.src=url;document.getElementsByTagName(“head”)[0].appendChild(script);}//调用函数。。。loadScript(路径脚本,函数(){警报('script ready!');});
5
  • 8
    供参考:有负载的适用于IE版本9和更高版本-因此只需设置有负载的现在对大多数人来说可能还可以 评论 2017年2月20日7:08
  • 11
    注释有负载的将在脚本“LOADS”的一分钟启动回调,而不是在脚本实际完成执行时启动回调,这令人失望
    – 马都德
    评论 2018年8月13日21:20
  • @MaDude你能参考一下相关文档吗? 评论 2018年11月7日11:25
  • 4
    这个有负载的当脚本尚未完成执行时,不可能调用处理程序,因为Javascript是单线程的。这意味着有负载的处理程序只能在脚本开始执行之前或完成执行之后调用。我个人从未见过前一种情况发生。。。曾经。如果有人知道一个可复制的案例有负载的处理程序可以在脚本开始执行之前调用,请告诉我们。 评论 2019年2月12日18:50
  • 加载脚本数组的简单扩展:函数loadScripts(urls,回调){var counter=0 for(var i=0;i<urls.length;i++){loadScript(urls[i],function(){if(++counter==urls.longth){callback()}})}
    – 瑞典
    评论 2020年5月5日17:49
40

如果你在2021年读到这篇文章,你可能更习惯于承诺。如果您的所有目标浏览器都支持ES6,或者您使用的是polyfill,则最好使用更现代的方法。

此解决方案的工作原理如下@杰克什·帕特尔答案,但它是基于承诺秒:

//定义函数loadScript(scriptUrl){const script=document.createElement('script');script.src=脚本URL;document.body.appendChild(脚本);return new Promise((res,rej)=>{script.onload=函数(){res();}script.onerror=函数(){rej();}});}//使用loadScript('http://your-cdn/jquery.js')然后(()=>{console.log('脚本已加载!');}).catch(()=>{console.error('脚本加载失败!处理此错误');});

可以在的参数中传递一些上下文变量物件回调,或者如果库导入了一些全局符号,则可以在那里引用它。

例如,由于jQuery引入了$全局符号,您可以调用资源($)并为其创建一个局部作用域(如果您使用的是TypeScript,并且不想在每个文件中声明模块变量,则最好使用这种方法编写const$=等待loadScript(..)).

如果您不想传递任何参数,可以这样缩短代码:

script.onload=资源;script.onerror=rej;
2
  • 2
    script.onLoad=资源;//简化
    – 库努肯
    评论 2019年2月1日9:30
  • 1
    @Kunukn还有一个较短的return new Promise(res=>script.onload=res)。但是将函数分配给有负载的更易于阅读,并允许您在解决时传递参数 评论 2019年2月1日9:50
37

我也有同样的问题。。。我的解决方案(没有jQuery):

<script onload=“loadedContent();”src=“/myapp/myCode.js”></script>
  • 7
    请注意:这与严格的CSP不兼容。 评论 2020年5月3日6:56
  • @布莱德利,你确定吗?我想那会增加nonce=“${nonce}”应该可以工作(未经测试的猜测)。
    – 盖特利
    评论 2021年4月15日19:08
  • @guettli不,不幸的是,您无法对内联事件处理程序进行nonce处理。只有元素内容是“不可读取的”,因此如果您尝试使用带有严格CSP的OPs属性,则执行将失败。 评论 2021年4月25日3:15
13

试试这样的

var script=document.createElement('script');if(script.readyState){//IEscript.onreadystatechange=函数(){if(script.readyState===“已加载”||script.ready State===”complete“){script.onreadystatechange=空;警报(jQuery);}};}else{//其他script.onload=函数(){警报(jQuery);}}script.src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"document.documentElement.appendChild(脚本);
0
4

实际上你可以把加载的内容()作为要加载的脚本的最后一行(这是JSONP背后的一种概念)

1
  • 如果不是你的剧本呢?
    – 共生体
    评论 2022年4月25日19:25
4

我的答案是Jaykesh Patel的回答。我实现了此代码以加载多个javascript。希望这对某人有所帮助:

//循环加载脚本函数load_scripts(url,final_callback,index=0){if(url类型[索引+1]===“未定义”){load_script(urls[index],final_callback);}其他的{load_script(urls[索引],function(){load_scripts(url、final_callback、index+1);} );}}//加载脚本函数load_script(url,回调){var script=document.createElement(“script”);script.type=“text/javascript”;if(script.readyState)//IE{script.onreadystatechange=函数(){if(script.readyState===“已加载”||script.ready State===”complete“){script.onreadystatechange=空;回调();}};}else//其他{  script.onload=函数(){callback();};}script.src=url;document.getElementsByTagName(“head”)[0].appendChild(script);调试(“包含javascript:”+url);}//示例var main=函数(){console.log(“执行的主功能”);}var js=[“path/to/script-1”,“path.to/script-2”,“path/to/stcript-3”];加载脚本(js,main);
1

这就是你所需要的

等待新的Promise((解析)=>{let script=document.createElement(“script”);script.onload=()=>{resolve();};script.src=“https://example.net/app.js";document.head.appendChild(脚本);});
-3
$.getScript(“您的脚本”,函数(){“你的行动”;});

你的答案

单击“发布您的答案”,表示您同意我们的服务条款并确认您已阅读我们的隐私政策.

不是你想要的答案吗?浏览标记的其他问题问你自己的问题.