Javascript 使用链接将 HTML 文件加载到 DIV 中

Loading an HTML file into a DIV with a link

提问by Mark Brewerton

There are several topics on this, but none that completely answer my question.

关于这个有几个主题，但没有一个能完全回答我的问题。

I would like to be able to have a link which loads a whole HTML file into a DIV.

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

This, for example, will load just text into my "MainBack" DIV. It works fine:

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

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

but I would like to load an entire file into it like this:

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

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

Any advice? I'm pretty new to this!

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

回答by Myles Gray

You can use an <iframe>to do just that:

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

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

Live Demo

现场演示

Code:

代码：

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

Or you could use lightboxto do it in a really pretty manner...

或者你可以使用灯箱以非常漂亮的方式来做......

It will display; photos, videos, HTML... basically anything you want.

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

回答by Paulo Scardine

Using the jQueryajax API you can grab the content of a particular tag inside the document from some URL:

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

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

Important:

重要的：

1. #MainBackis the ID of the placeholder tag in your parent document
2. /path/file.htmlid the URL for the document you want to load data from
3. bodyis the tag holding the content you want to load.

1. #MainBack是父文档中占位符标签的 ID
2. /path/file.htmlid 要从中加载数据的文档的 URL
3. body是包含要加载的内容的标签。

What can go wrong:

什么可能出错：

• check #1 above, does your parent document has a tag with the exact ID you are using in the ajax call?
• check #2, can you load the URL in a separate browser window?
• if you can load the URL, use the "view source" option to inspect the HTML source and make sure you have the selector you are using in #3 above. Perhaps the content you want is being generated dynamically from JavaScript instead of being served by the HTTP server, in this case use the iframesolution from the other answer.
• check the JavaScript console and look for some message about cross-domain issues, CSRF, CORS, etc. If the content is from another domain you may stumble upon the browser security rules; this is a whole new can of worms and I will not cover the possible solutions here, take the error message from the console and google for it.

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

回答by Shaz

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

--> Demo<--

-->演示<--

回答by Tony S.

You can load HTML content from another file via jQuery ".load()" method.

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

First, in the HEAD section of your main html file, you need to include this line to access the jQuery libraries' functions:

首先，在主 html 文件的 HEAD 部分，您需要包含以下行以访问 jQuery 库的函数：

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

Second, add this code inside that HEAD section to load the contents into the DIV:

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

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

Example of the contents of html-content-file.html:

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>

More info: http://docs.jquery.com/Ajax/load

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

回答by Pushpendu Ghosh

Use document.getElementById('element').innerHTML = 'HTML SOURCE'with a javascript event. This works completely without problems.

使用document.getElementById('element').innerHTML = 'HTML SOURCE'了JavaScript事件。这完全没有问题。

回答by Mārti?? Briedis

You cannot load a complete html page in to another. By that, I mean that you cant have a markup like this:

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

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

Maybe thing you are searching for is an iframe? A small "window" in your page to another page?

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

If iframe doesn't suit you, take a look at this Jquery function which loads a html from other source in your specified selector: http://api.jquery.com/load/

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