我的目标是<head>只在某个元素存在的情况下加载javascript <body>.
但是,我遇到了一个问题:我正在加载一个Web组件,它只是在<script>其他地方托管,并被引入:
<script src="https://someurl.com/some-web-component.min.js"></script>
这个Web组件文件非常庞大,所以除非我们的内容管理系统(CMS)将其插入到正文中,否则我不想将其拉入.
我工作的限制是:
• <head>页面之间共享,因此我需要条件逻辑
•我无法控制<body>CMS插入的内容,它可能包含<my-web-component>标记
•我需要脚本来加载Web组件,所以我不能使用jQuery的$(document).ready,至少我认为我不能 - 因为浏览器不知道元素存在而抛出错误
这个plunker部分显示我的问题,减去所有Web组件的复杂性:
有什么方法吗？
您可以使用DOMContentLoaded事件.
完全加载和解析初始HTML文档时会触发DOMContentLoaded事件,而无需等待样式表,图像和子帧完成加载.
在这种情况下,您可以查找Component并使用以下内容添加脚本
document.addEventListener("DOMContentLoaded", function(event) {
if(document.querySelector('Component')){
var script = document.createElement('script');
script.src = 'https://someurl.com/some-web-component.min.js';
document.head.appendChild(script)
}
});
可能更好的方法是script在头部添加async属性,然后在找不到组件时将其删除.像这样的东西
<script async src = "https://someurl.com/some-web-component.min.js"> </script>
<script >
document.addEventListener("DOMContentLoaded", function(event) {
if (document.querySelector('Component') == null) {
var script = document.querySelector('script[src="https://someurl.com/some-web-component.min.js"]')
document.head.removeChild(script)
}
});
</script>
有关DOM生命周期事件的
更多信息有关异步脚本加载的更多信