0

我们有一个包含以下脚本块的组件，用于插入一个 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调用中工作 - 如果我insertAdjacentHTML用一个简单的替换document.write它，它在这两种情况下都可以工作，但我无法使用它，因为它会使我们的编码分析策略失败

4

1 回答 1

0

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

解析完 DOM 后它变为 null。

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

var element = document.currentScript
$.ajax({
  success() {
    element.parentNode.insertAdjacentHTML(...)
  }
})
于 2020-11-11T14:59:35.070 回答