如何将一个<script src="https://remote.com/"></script>元素注入到我的页面中,等待它执行,然后使用它定义的函数？
仅供参考:在我的情况下,脚本会在极少数情况下进行一些信用卡处理,所以我不想总是包含它.我想在用户打开更改信用卡选项对话框时快速包含它,然后向其发送新的信用卡选项.
编辑以获取更多详细信息:我无权访问远程脚本.
Pie*_*rre 124
您可以使用Google Analytics或Facebook的方法:
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
// remote script has loaded
};
script.src = 'http://www.google-analytics.com/ga.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
更新:
以下是新的Facebook方法; 它依赖于现有的脚本标记而不是<head>:
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)){ return; }
js = d.createElement(s); js.id = id;
js.onload = function(){
// remote script has loaded
};
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
facebook-jssdk为您的唯一脚本标识符,以避免多次添加.Fra*_*ino 34
使用事件侦听器和ES2015构造的相同方法:
function injectScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.src = src;
script.addEventListener('load', resolve);
script.addEventListener('error', () => reject('Error loading script.'));
script.addEventListener('abort', () => reject('Script loading aborted.'));
document.head.appendChild(script);
});
}
injectScript('http://example.com/script.js')
.then(() => {
console.log('Script loaded!');
}).catch(error => {
console.log(error);
});
Fli*_*imm 10
这是同步动态加载和执行脚本列表的一种方法.您需要将每个脚本标记插入DOM,并将其async属性显式设置为false:
script.async = false;
注入到DOM中的脚本默认是异步执行的,因此您必须手动将async属性设置为false以解决此问题.
<script>
(function() {
var scriptNames = [
"https://code.jquery.com/jquery.min.js",
"example.js"
];
for (var i = 0; i < scriptNames.length; i++) {
var script = document.createElement('script');
script.src = scriptNames[i];
script.async = false; // This is required for synchronous execution
document.head.appendChild(script);
}
// jquery.min.js and example.js will be run in order and synchronously
})();
</script>
<!-- Gotcha: these two script tags may still be run before `jquery.min.js`
and `example.js` -->
<script src="example2.js"></script>
<script>/* ... */<script>
像这样的东西应该做的伎俩:
(function() {
// Create a new script node
var script = document.createElement("script");
script.type = "text/javascript";
script.onload = function() {
// Cleanup onload handler
script.onload = null;
// do stuff with the loaded script!
}
// Add the script to the DOM
(document.getElementsByTagName( "head" )[ 0 ]).appendChild( script );
// Set the `src` to begin transport
script.src = "https://remote.com/";
})();
希望有所帮助!干杯.
import()使用动态导入，您现在可以加载模块并等待它们执行，就像这样：
import("http://example.com/module.js").then(function(module) {
alert("module ready");
});
如果模块已经被加载和执行，它不会被再次加载和执行，但是返回的promiseimport仍然会解析。
请注意，该文件是作为模块加载的，而不仅仅是脚本。模块在严格模式下执行，并在模块范围内加载，这意味着变量不会像在正常加载的脚本中那样自动成为全局变量。export在模块中使用关键字与其他模块或脚本共享变量。