hyperHTML似乎没有调用(附加？)满载事件

Question

我试图在使用JavaScript时动态地加载额外的hyperHTML。我已经把失败的范围缩小到了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',和appendChild(中正确地使用了香草JS。

Answer 1

更新这是Firefox的一个问题，它考虑通过innerHTML注入死亡节点脚本，即使是通过模板和导入之后。

这意味着问题不在onload本身，而是没有触发任何网络请求，这样onload就永远不会发生。

正如您现在可以在密码笔 eaxmple中验证的那样，它使用了我重写的完全相同的代码片段，部分是为了让我非常高兴地链接代码笔(火狐和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>`