Question

我正在尝试使用hyperHTML动态有条件地加载其他JavaScript。我已经将失败归咎于logging: level: DEBUG事件。

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

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',的香草JS正常工作。

Answer 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>`

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

1 个答案: