一个独立的 Javascript/Html 模块——这可能吗？

Question

[编辑：我可能找到了另一种解决方案。 Kooilnc 的解决方案看起来不错。这个问题底部的解决方案比Kooilnc的更好还是更差？]

我有一个 div 和关联的 javascript 代码。我想把这个 div 的 html 和相关的 javascript 代码全部放在 one 文件中，一种自包含的 'module'，例如

mydiv.html

<html>
<div id="Wibble" style="display: none;">
    ... loads of structure for just this div
</div>
<script type="text/javascript">
    ... loads of js functions just associated with this div
</script>
</html>

然后在我的主页中 index.html 我想以某种方式包含这个 'module'。

我唯一找到的是服务器端包含：

index.html

<!DOCTYPE html>
<html>
<head>
    ... loads of stuff
</head>
<body>
   ... loads of other html structure

   <!--#include FILE="mydiv.html" -->

   ... loads of other html structure and script tags
</body>
</html>

问题一：有更好的方法吗？

问题 2：我是否应该在 mydiv.html 中添加 html 标签，因为那显然会在 index.html 中放置一个 html 标签地点？

问题 3：如果 Q2 中的 html 标签不应该存在，我该如何编写 mydiv.html 文件，使其具有中的所有格式和漂亮的彩色结构Visual Studio代码?

编辑：

Kooilnc 的解决方案（在下面的答案中）看起来不错。这是我找到的另一个解决方案。它在我的开发环境中工作 Visual Studio 代码。我需要 body 的 onload 中包含的 html 文件中的 javascript。有谁知道这个解决方案是否可以在满足我的 body onload 要求的服务器上运行？它比 Kooilnc 的解决方案更好还是更差？

Jquery 必须包含在此之前的普通 <script> 标签中。

我将此代码插入 index.html

<!DOCTYPE html>
<html>
<head>
    ... loads of stuff
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">  
</head>
<body>
   ... loads of other html structure

   <div id="include_mydiv"></div>
   <script>
       $(function(){
           $("#include_mydiv").load("mydiv.html");
       });
   </script>

   ... loads of other html structure and script tags
</body>
</html>

并且mydiv.html没有任何<html>标签：

<div id="Wibble" style="display: none;">
    ... loads of structure for just this div
</div>
<script type="text/javascript">
    ... loads of js functions just associated with this div
</script>

Answer 1

使用 iframe

<iframe id="inlineFrameExample"
    width="300"
    height="200"
    src="mydiv.html">

见https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Answer 2

您可以尝试从 template 个元素导入。这是一个可能有用的简化模板示例。

如果您需要从外部文件导入，请查看this example我为您准备的。

document.querySelectorAll(`[data-import]`).forEach( el => {
  if (!el.dataset.imported) {
    el.appendChild(document.querySelector(`#${el.dataset.import}`)
      .content.cloneNode(true));
    el.dataset.imported = `ok`;
  }
});

<template id="someForm">
    <script>
      document.addEventListener(`click`, handle);
      function handle(evt) {
        if (evt.target.nodeName === `BUTTON`) {
          alert(`Yes. I am handled`);
        }
      }
    </script>
    <button id="sub">Handle me!</button>
</template>

<template id="somethingElse">
    <style type="text/css">
      .red {color: red;}
    </style>
    <p class="red">I am appended too</p>
</template>

<div data-import="someForm"></div>
<div data-import="somethingElse"></div>

一个独立的 Javascript/Html 模块——这可能吗？

A self contained Javascript/Html module - Is this possible?

javascript

module

include