HTML & JS：如何从嵌入式网页订阅事件？答案

【问题标题】：HTML & JS: How to subscribe to events from an embedded webpage?HTML & JS：如何从嵌入式网页订阅事件？
【发布时间】：2021-10-27 23:24:45
【问题描述】：

我正在尝试构建可托管在 IPFS 上的模块化独立（无服务器）网站。我用来使网站模块化的技术之一是将单个网页拆分为多个 HTML 文件，然后通过将它们相互嵌入来组合它们，

例如：

网页文件：Home.html、Sidebar.html

Home.html 中的代码：

    <html>
      <head></head>
      <body>
        <!some code>
        <object id="Sidebar" data="Sidebar.html"></object>
        <!some more code>
      </body>
    </html>

这是网站外观的图片。请注意显示侧边栏已嵌入的滚动条。
带有嵌入式侧边栏的网站：

我想让侧边栏中的文本元素（在嵌入的 Sidebar.html 中）被单击时，主页（Home.html）中的 JavaScript 可以做出反应，

即我希望 Home.html 中的 JavaScript 订阅嵌入式侧边栏 html 中的事件。

关于如何最好地实现这一点的任何想法？

【问题讨论】：

标签： javascript html web embed ipfs

【解决方案1】：

我找到了一种解决方案，在某些情况下可能是一个合适的替代方案，即从嵌入文档的上下文调用父 html 文件中的函数。因此，我不是从父文档订阅嵌入文档中的单击事件，而是以相反的方式进行：处理嵌入文档中的事件并从那里调用父文档中的函数。这是一些工作代码：

嵌入的 HTML 文档（在名为 embedded_file.html 的文件中）：

<body>
  <div onclick="ClickHandler(this)">Test</div>
  <script>
    var ClickHandler = function(sender) {
      parent.OnEmbeddedDocClick(sender);
    };
  </script>
</body>

主 HTML 页面：

<body>
  <object data="./embedded_file.html"></object>
  <script>
    var OnEmbeddedDocClick = function(sender) {
      window.alert("Text in embedded file got clicked.");
    };
  </script>
</body>

请注意，为了测试这一点，大多数浏览器要求将这两个文件托管在某种形式的 Web 服务器上，而不是存储在本地机器的文件系统上，否则浏览器的 same-origin policy 会阻止嵌入文件访问父 html 文件。将文件托管在 IPFS 上并从那里进行测试足以规避这个问题。

【讨论】：