0

我正在尝试在使用 hyperHTML 时有条件地动态加载其他 JavaScript。我已将失败范围缩小到onload事件。

这是一个最小、完整和可验证的示例的尝试：

class ScriptLoader extends hyperHTML.Component {
  onload(event) {
    notie.alert({ text: "notie loaded" });
  }
  render() {
    return this.html`
      <script
        src=https://unpkg.com/notie
        type=text/javascript
        async=false
        onload=${this}
      />
    `;
  }
}

hyperHTML.bind(document.body)`
  <h2>onload test (notie)</h2>
  ${new ScriptLoader}
`;
<script src="https://unpkg.com/hyperhtml@2.4.0/min.js"></script>

如您所见notie.alert，即使script正确插入，也永远不会调用它。

这个过程使用带有addEventListener('load',and的 vanilla JS 可以正常工作appendChild(。

4

1 回答 1

1

更新这是 Firefox 和 Web (Safari) 的一个问题，考虑到通过 innerHTML 注入的死亡节点脚本，即使是通过模板并在导入之后也是如此。

这意味着问题不在于onload本身，而是从未触发过网络请求这一事实，因此这onload永远不会发生。

正如您现在可以在Code Pen eaxmple 中验证的那样，它使用与我重写的完全相同的代码段，部分是为了让我很高兴我链接 Code Pen，Firefox 和 Safari，以及 Chrome 和 Edge 应该可以正常工作。

hyperHTML.bind(document.body)`
  <h2>onload test (notie)</h2>
  ${new ScriptLoader}
`;

我保留旧编辑的一部分只是为了让您或任何其他读者意识到 JSX 深情可能会过度使用的一点警告。

您应该注意一件事：hyperHTML 不解析 HTML，并且<script/>不是有效的 HTML。

如果您不定期关闭非空标签，您就有可能找到不应该的节点，这超出了 hyperHTML 的能力，不幸的是 HTML 的一般工作方式。

<p/><b>unexpected</b>

我知道对于这个演示案例，您必须这样做，否则解析会在页面中显示关闭脚本，但请记住，您始终可以在必要时这样做：

`<script><\x2fscript>`
于 2017-12-06T16:00:49.817 回答