如何在HTML中嵌入附带JS文件的外部HTML页面？

Hey AntonioMJ, 我来帮你搞定这个嵌入页面后JS加载失败的问题！你遇到的核心问题大概率是脚本文件的相对路径不对，或者你用的嵌入方式（比如直接把HTML内容插入DOM）没正确触发脚本加载。下面给你两种靠谱的解决方案：

方案一：使用<iframe>嵌入（最简单且不易出错） #

iframe是最直接的外部页面嵌入方式，它会完整加载目标页面的所有资源（包括JS、CSS），只要你的JS文件路径正确，就能正常运行。

修改你的主页面代码，在需要嵌入的位置添加iframe：

<head>
  <h1>Prueba</h1>
</head>
<body>
  <form method="POST" action="">
    Introduce KeyWord
    <input type="text" name="key">
    <input type="submit" name="submit" value="Submit">
  </form>
  <!-- 嵌入词云页面，替换成你的词云HTML文件名 -->
  <iframe src="wordcloud.html" width="100%" height="600px" frameborder="0"></iframe>
</body>

注意：确保d3.js、d3.layout.cloud.js等JS文件和你的词云HTML文件在同一文件夹里，这样相对路径才能正确找到它们。

方案二：直接合并两个页面的代码（更灵活，适合需要交互的场景） #

如果不想用iframe，你可以把词云页面的内容直接整合到主页面里，需要注意两点：

1. 把词云页面的<script>标签全部移到主页面的<head>或<body>末尾
2. 确保所有JS文件的相对路径正确（和主页面在同一目录，或用正确的相对路径指向它们）

合并后的完整代码示例：

<html>
<head>
  <h1>Prueba</h1>
  <meta charset="UTF-8">
  <title>Prueba + Word Cloud</title>
  <!-- 引入词云所需的JS文件 -->
  <script src="d3.js" charset="utf-8"></script>
  <script src="d3.layout.cloud.js"></script>
  <script src="d3.wordcloud.js"></script>
  <script src="example.words.js"></script>
</head>
<body>
  <form method="POST" action="">
    Introduce KeyWord
    <input type="text" name="key">
    <input type="submit" name="submit" value="Submit">
  </form>
  <!-- 词云的HTML内容 -->
  <div style="text-align: center; margin-top: 50px;">
    <h1>Word Cloud</h1>
    <div id='wordcloud'></div>
  </div>
</body>
</html>

为什么之前的方法失效？ #

如果你之前是用JS动态插入HTML内容（比如innerHTML），这种方式不会自动执行插入的<script>标签，也不会加载外部JS文件。而上面两种方法要么通过iframe完整加载页面，要么直接把脚本引入主页面，就能正常加载JS资源了。

内容的提问来源于stack exchange，提问作者AntonioMJ