捕获22：如果依赖于脚本存在的元素，则加载脚本 [英] Catch 22: Load Script if Element That Depends on Script Exists
问题描述
我的目标是仅当< body> < head> 中加载javascript $ C>。 然而，我遇到了一个问题：我正在加载一个Web组件，它只是一个< script> 在其他地方托管并被拉入：
< script src =https://someurl.com/some-web- component.min.js>< /脚本>
这个web组件文件非常庞大，所以我不想把它放在中，除非 它由我们的内容管理系统（CMS）插入到正文中。
我正在使用的约束是：
•< head> 在页面之间共享，所以我需要条件逻辑
•我无法控制CMS插入的< body> ，这可能会包含< my-web-component> tag
•我需要脚本来加载Web组件，所以我不能使用jQuery的$（document）.ready，至少我认为我不能 - 一个错误将被抛出，因为浏览器不会知道元素存在
这个plunker部分地显示了我的问题，减去了所有web组件的复杂性：
任何你可以使用 / docs / Web / Events / DOMContentLoadedrel =noreferrer> DOMContentLoaded 事件。
$ b
DOMContentLoaded事件在最初的HTML文档已经完全加载和解析了
，而无需等待样式表，
图像和子帧完成加载。
在这种情况下，您可以查找组件，并添加类似以下内容的脚本：
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）
}
}）;
可能更好的方法是添加脚本 async 属性的头部，如果未找到该组件，则稍后将其删除。
类似于此
< script async src =https://someurl.com/some-web- component.min.js> < /脚本>
< 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>
My goal is to load javascript in the <head> only if a certain element exists in the <body>.
However, I have a problem: I am loading a Web Component, which is just a <script> hosted elsewhere and is pulled in as:
<script src="https://someurl.com/some-web-component.min.js"></script>
This web component file is huge, so I don't want to pull it in unless it is inserted into body by our Content Management System (CMS).
The constraints I am working under are:
• The <head> is shared between pages, so I need conditional logic
• I have no control over the <body> inserted by the CMS, which will potentially contain the <my-web-component> tag
• I NEED the script to load the web component, so I can't use jQuery's $(document).ready, at least I think I can't - an error will be thrown because the browser won't know the element exists
This plunker partially shows my problem, minus all the web component complexity:
Any way around this?
You can use DOMContentLoaded event.
The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
In this case you can look for the Component and add the script with something like the following
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)
}
});
Probably a better approach though would be to add the script in the head with async attribute and later remove it if the component is not found.
Something like this
<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>
More about DOM lifecycle events
More about async script loading
这篇关于捕获22：如果依赖于脚本存在的元素，则加载脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
