【问题标题】：Loading an HTML file into a DIV with a link将 HTML 文件加载到带有链接的 DIV 中
【发布时间】：2011-02-13 21:23:41
【问题描述】：

这方面有几个主题，但没有一个可以完全回答我的问题。

我希望能够有一个将整个 HTML 文件加载到 DIV 中的链接。

例如，这只会将文本加载到我的“MainBack”DIV 中。它工作正常：

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<p>1</p>';">Computing</a>

但我想像这样将整个文件加载到其中：

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = 'HTML FILE';">Computing</a>

有什么建议吗？我对此很陌生！

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以使用<iframe> 来做到这一点：

<iframe src="link.html" width="100%" height="300"></iframe>

Live Demo

代码：

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a>

或者你可以使用 lightbox 来做一个非常漂亮的方式......

它会显示；照片、视频、HTML……基本上是你想要的任何东西。

【讨论】：

这应该如何格式化？我应该把它放在''里面吗？如果是这样，它似乎不起作用。
@MarkBrewerton 您是在加载外部文件还是只是加载 HTML 代码？
一大堆 HTML 代码，加载外部文件似乎更整洁。
是的，你是对的，最好的办法是把它放到一个外部 HTML 文件中，然后用 onclick 事件调用<iframe>，或者使用灯箱，然后给你一个漂亮的半透明弹出窗口
出于兴趣，我将如何加载一些 HTML？我似乎能够加载像
1
这样的东西，但不能加载像 YouTube 嵌入这样的东西。

【解决方案2】：

使用jQuery ajax API，您可以从某个 URL 获取文档内特定标签的内容：

<a href="#computing" 
   onclick="$('#MainBack').load('/path/file.html body')"
>
    Computing
</a>

重要：

#MainBack 是你父文档中占位符标签的ID
/path/file.html id 您要从中加载数据的文档的 URL
body 是包含您要加载的内容的标签。

会出什么问题：

检查上面的#1，您的父文档是否有一个标签，其中包含您在 ajax 调用中使用的确切 ID？
检查 #2，您可以在单独的浏览器窗口中加载 URL 吗？
如果您可以加载 URL，请使用“查看源代码”选项检查 HTML 源代码，并确保您拥有上面 #3 中使用的选择器。也许您想要的内容是从 JavaScript 动态生成的，而不是由 HTTP 服务器提供的，在这种情况下，请使用另一个答案中的 iframe 解决方案。
检查 JavaScript 控制台并查找有关跨域问题、CSRF、CORS 等的消息。如果内容来自其他域，您可能会偶然发现浏览器安全规则；这是一个全新的蠕虫罐头，我不会在这里介绍可能的解决方案，从控制台获取错误消息并搜索它。

【讨论】：

您是否在 HTML 标头部分加载了 jQuery？请阅读文档并查看给定链接中的示例。
它应该可以工作。这是一个比 iFrame 更清洁的解决方案。

【解决方案3】：

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'></iframe>'">Computing</a>

--> Demo

【讨论】：

【解决方案4】：

您无法将完整的 html 页面加载到另一个页面中。我的意思是你不能有这样的标记：

<html>
  <head></head>
  <body>
    <div>
      <html>
      ...
      </html>
  </body>
</html>

也许您正在搜索的是 iframe？您页面中的一个小“窗口”到另一个页面？

如果 iframe 不适合您，请查看此 Jquery 函数，该函数在您指定的选择器中从其他来源加载 html：http://api.jquery.com/load/

【讨论】：

如果我只想加载 HTML 页面的一部分呢？像这样：
在计算方面，我学习编程，以及计算机和逻辑背后的理论。

这是我和朋友制作的有关 TCP/IP 堆栈的视频：
youtube.com/embed/oeGt3exwqoE" frameborder="0" allowfullscreen>

【解决方案5】：

将 document.getElementById('element').innerHTML = 'HTML SOURCE' 与 javascript 事件一起使用。这完全没有问题。

【讨论】：

如何加载“HTML SOURCE”？
@lupus-ossorum 通过 AJAX 请求

【解决方案6】：

您可以通过 jQuery ".load()" 方法从另一个文件加载 HTML 内容。

首先，在你的主 html 文件的 HEAD 部分，你需要包含这一行来访问 jQuery 库的函数：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

其次，在 HEAD 部分中添加此代码以将内容加载到 DIV 中：

<script>
$(document).ready(function() {
    $('#MainBack').load('html-content-file.html');    
});
</script>

html-content-file.html 内容示例：

  <a class="brand" href="#">240Dots</a>
  <div class="navbar-content">
    <ul class="nav">
      <li>
        <a href="index.html">Inicio</a> 
      </li>
      <li>
        <a href="quienes-somos.html">Quienes Somos</a> 
      </li>
      <li>
        <a href="servicios.html">Servicios</a> 
      </li>
      <li>
        <a href="contactar.html">Contactar</a>
      </li>
    </ul>
  </div>

更多信息：http://docs.jquery.com/Ajax/load

【讨论】：

您的代码中有一个错误：<script> src="http://... 应该是 <script src="http://...。重要的小细节。