Question

我的目标是仅在<head>中存在某个元素时才在<body>中加载javascript。

但是，我遇到了一个问题：我正在加载一个Web组件，它只是一个<script>托管在其他地方，并被拉入：

<script src="https://someurl.com/some-web-component.min.js"></script>

此Web组件文件非常庞大，因此我不想在中提取它，除非它由我们的内容管理系统（CMS）插入到正文中。

我正在进行的限制是：

•页面之间共享<head>，所以我需要条件逻辑

•我无法控制CMS插入的<body>，其中可能包含<my-web-component>标记

•我需要脚本来加载web组件，所以我不能使用jQuery的$（document）.ready，至少我认为我不能 - 因为浏览器不会知道元素存在

这个plunker部分显示了我的问题，减去了所有Web组件的复杂性：

https://plnkr.co/edit/GGif2RNHX1iLAvSk1nUw?utm_source=next&utm_medium=banner&utm_campaign=next&p=preview

有什么方法吗？

Answer 1

您可以使用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 lifecycle events的更多信息有关async script loading

的更多信息

Answer 2

我正在使用$(document).ready并在此方法中检查元素是否存在。它对我来说完全没问题。以下是代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>jQuery Test Element Exists or Not</title>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var elem = document.querySelector('h1');
      var isElemPresent = !!elem;
      console.log('Is the element present: ', isElemPresent);
    });
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <script>
    var elem = document.querySelector('h1');
    var isElemPresent = !!elem;
    console.log('Oh NOW it works...: ', isElemPresent);
  </script>
</body>

</html>

我不确定在使用jQuery时你遇到什么问题。可能还有其他一些问题。在检查元素是否存在之后，上述方法足以加载脚本。

Plunker链接： https://run.plnkr.co/preview/cjgczwlzt000knneldv5d52ea/

Catch 22：如果依赖于脚本的元素存在，则加载脚本

2 个答案: