hyperHTML 似乎无法调用（附加？）onload 事件

Question

我正在尝试在使用 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>

如您所见，即使正确插入 script，也从未调用 notie.alert。

这个过程在 addEventListener('load', 和 appendChild( 的 vanilla JS 中正常工作。

Answer 1

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

这意味着问题不在于 onload 本身，而是事实上没有网络请求被触发，因此 onload 永远不会发生。

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

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

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

有一件事您应该注意：hyperHTML 不解析 HTML 并且 <script/> 无效 HTML.

如果您不定期关闭非空标签，您就有可能在不应该找到的节点上找到节点，这超出了 hyperHTML 的能力，不幸的是 HTML 通常如何工作.

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

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

`<script><\x2fscript>`

hyperHTML 似乎无法调用（附加？）onload 事件

hyperHTML seemingly fails to call (attach?) onload events

hyperhtml