我有一个 html 页面，我在其中通过如下所示的 javascript 动态附加 html
<script type="text/javascript" src="/myapp/htmlCode"></script>
我想调用一个js函数，例如loadedContent(); 一旦上述脚本添加了动态 html。
有人可以帮助我如何做到这一点吗？
脚本加载后调用javascript函数
IT技术
javascript
jquery
html
2021-02-07 00:37:24
6个回答
你可以在不使用 head.js javascript 的情况下实现这一点。
function loadScript( url, callback ) {
var script = document.createElement( "script" )
script.type = "text/javascript";
if(script.readyState) { // only required for IE <9
script.onreadystatechange = function() {
if ( script.readyState === "loaded" || script.readyState === "complete" ) {
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName( "head" )[0].appendChild( script );
}
// call the function...
loadScript(pathtoscript, function() {
alert('script ready!');
});
我有同样的问题......我的解决方案（没有jQuery）：
<script onload="loadedContent();" src ="/myapp/myCode.js" ></script>
如果您在 2021 年阅读这篇文章，那么您可能更习惯于 Promise。如果您的所有目标浏览器都支持 ES6 或者您正在使用 polyfill，则更可取的方法是更现代的方法。
此解决方案的工作原理类似于@JaykeshPatel答案，但它基于Promises：
// definition
function loadScript(scriptUrl) {
const script = document.createElement('script');
script.src = scriptUrl;
document.body.appendChild(script);
return new Promise((res, rej) => {
script.onload = function() {
res();
}
script.onerror = function () {
rej();
}
});
}
// use
loadScript('http://your-cdn/jquery.js')
.then(() => {
console.log('Script loaded!');
})
.catch(() => {
console.error('Script loading failed! Handle this error');
});
您可以在res回调的参数中传递一些上下文变量，或者如果您的库导入了一些全局符号，您可以在那里引用它。
例如，由于 jQuery 引入了$全局符号，您可以res($)为其调用并创建一个局部作用域（如果您正在使用 TypeScript 并且不想在每个文件中声明module变量，则可以这样编写，这是完美的const $ = await loadScript(..)）。
如果您不想传递任何参数，则可以像这样缩短代码：
script.onload = res;
script.onerror = rej;
尝试这样的事情
var script = document.createElement('script');
if(script.readyState) { //IE
script.onreadystatechange = function() {
if ( script.readyState === "loaded" || script.readyState === "complete" ) {
script.onreadystatechange = null;
alert(jQuery);
}
};
} else{//others
script.onload = function() {
alert(jQuery);
}
}
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"
document.documentElement.appendChild(script);
实际上你可以把它loadedContent()作为你正在加载的脚本的最后一行（这是 JSONP 背后的概念）
其它你可能感兴趣的问题