document.currentScript.parentNode.insertAdjacentHTML 在 ajax 调用中不起作用

Question

我们有一个包含以下脚本块的组件，用于插入一个 js 可观察图像，当它出现时会更新：

<script type="text/javascript">
  document.currentScript.parentNode.insertAdjacentHTML('afterbegin', '<span class="js-dom-observable js-dom-observable--picture"><img src="http://www.fillmurray.com/200/300" data-src="http://www.fillmurray.com/500/500" alt="Image"></span>');
</script>

当组件直接加载到页面时效果很好，但是，当它由于 ajax 调用而在 html 中并附加到页面时，它不再添加图像 - 我猜这是因为document.currentScript 不再是它所在的脚本标记，而是执行 ajax 的脚本：

$.ajax({
  url: `/${APP_NAME}${filterResultEndpoint}`,
  type: 'POST',
  traditional: true,
  data: searchData.getPostData(),
  success: result => {
    $('.results').html(result);
  },
});

有没有办法让脚本标签中的 insertAdjacentHTML 在 ajax 调用中工作 - 如果我用简单的 document.write 替换 insertAdjacentHTML，它在这两种情况下都可以工作，但我无法使用它，因为它会使我们的编码分析策略失败

Answer 1

document.currentScript 是一个全局变量，在解析所有脚本标签时会发生变化

DOM 解析完成后变为 null。

在进行任何异步操作之前，您必须将元素存储到变量中

var element = document.currentScript
$.ajax({
  success() {
    element.parentNode.insertAdjacentHTML(...)
  }
})