Question

我如何在脚本类型=“模块”中获取ownerDocument？

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

 ＆lt; template＆gt;＆＃xD;＆＃xA; text＆＃xD;＆＃xA;＆lt; / template＆gt;＆＃xD;＆＃xA;＆lt; script type =“module”＆gt;＆＃xD;＆＃xA; let owner = document.currentScript.ownerDocument //为null＆＃xD;＆＃xA; ＆＃的xD;＆＃XA; //但我需要得到＆lt; template＆gt;＆＃xD;＆＃xA; ＆＃的xD;＆＃XA;让tpl = owner.querySelector（'template'）＆＃xD;＆＃xA;＆lt; / script＆gt;

＆＃xD;＆＃xA;

＆＃xD;＆＃ XA;

＆＃的xD;＆＃XA;

＆＃XA;

Answer 1

规范明确指出，在使用<script type="module">时，document.currentScript属性在执行期间设置为null。 See spec under "execute a script block"

如果使用src属性，当然这是显而易见的。源无法知道它将被脚本标记调用而不是导入语句（或两者）。在内联模块时，总会有一个脚本标记，但我猜他们想要使体验保持一致。

如果您的文档实际上是window.document仍然可用作全局文件。否则，如果您仍希望将脚本作为模块加载，则有两个选项：

不是最漂亮的;在模块上方创建一个全局并存储模板。

<script type="text/javascript">
window.myTemplates = ((ns) => {
  const owner = window.document.currentScript.ownerDocument;
  ns.fancyButton = owner.querySelector("template");
  return ns;
})(window.myTemplates || {});
</script>

<script type="module">
const tpl = window.myTemplates.fancyButton;
// ...
</script>

不要将模板编写为HTML模板，而是将其编写为ES / JS模板。您的编辑器可能不支持突出显示文字HTML，并且标签的linting是一个问题。

<script type="module">
const tpl = window.document.createElement("template");
tpl.innerHTML = `
  <strong>example</strong>
  <span style="background-color: rgba(127,127,127,0.6);">text</span>
`;
// ...
</script>

如何在<script type =“module”>中获取document.currentScript.ownerDocument？

1 个答案: