我目前正在使用 angular 8 及其 cli 来开发我的网站。
问题：我想添加指向另一个网站的javascript文件的<script>标签，例如<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
除了添加到索引.html之外，我们还有其他直接的方法可以在组件中执行此操作。我不希望在构建过程中将来自其他网站的 js 与我的基于角度的网站捆绑在一起。它只应在应用程序运行时动态加载。
更新于 27 Jan 2020
以下是我查询的答案。
感谢Dean Van Greunen带领我完成以下最终实施。
以下是我如何在角度组件内动态重新加载脚本元素
reloadScript(url:string){
if(document.querySelector("#wiris"))
document.querySelector("#wiris").remove()
var wirisScriptEle = document.createElement('script');
wirisScriptEle.id="wiris"
wirisScriptEle.src = url;
document.getElementsByTagName('head')[0].appendChild(wirisScriptEle);
}
其中 url 是调用方传入的"https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image">
-----进一步查询----------
如果有人知道如何实现同样的事情而不必编写上面的javascript代码，例如直接放入html模板而无需将其删除，请告诉我。我也会接受这个答案。
将其添加到索引不会将其绑定到构建中，您可以做的是在您的根组件中您可以执行此操作
源语言：
// Dynamic Load JS
var script = document.createElement('script');
script.onload = function() {
console.log("Script loaded and ready");
};
script.src = "https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image";
document.getElementsByTagName('head')[0].appendChild(script);
更新版本：
// Dynamic Load JS
let script_url = "https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image";
let script_exist = false;
let headLen = document.getElementsByTagName('head').length;
let script_index = null;
// Search if script already exists
for(var i=0;i<headLen; i++){
if(document.getElementsByTagName('head')[i].src==script_url){
script_exist = true;
script_index = i;
break;
}
}
//add script function (so i dont have duplicated code)
function addScript(){
var script = document.createElement('script');
script.onload = function() {
console.log("Script loaded and ready");
};
script.src = script_url;
document.getElementsByTagName('head')[0].appendChild(script);
}
// this will either add the script or remove the old one then add the new one, only 1 script will exist in the pages lifetime
if(!script_exist){
addScript();
} else {
if(script_index != null){
document.getElementsByTagName('head').removeChild(document.getElementsByTagName('head')[script_index]);
}
addScript();
}
此更新版本将检查脚本是否存在，如果是，它将删除它，然后再次添加。
您只需将其添加到 Index.html 文件的 head 标签中即可。
<head>
<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
</head>
据我了解，如果你将模板文件从组件的.ts文件中分离出来，angular会尝试将相关的脚本文件(ng build的输出(添加到使用模板文件(.html(，使用与你想尝试的相同方式(
在 vueJs 中，这种方式称为(使用脚本标签导入外部库(，导入插件。
对于 angular ，你可以尝试将选定的库添加到模板的顶部，然后尝试访问函数，使用 window.onload 或 document.onload((，或者最好在组件处于初始状态时获取那些漂亮的函数(实现 OnInit，然后添加 ngOnInit(( {}(
使用 console.log(( ，当你找到了访问函数的正确方法时，请确保 为相关组件创建了全局 const 对象。
我希望这是有用的。