- ＆GT; Demo＆lt; -

Question

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

我希望能够有一个链接将整个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>

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

Answer 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 ...基本上你想要的任何东西。

Answer 2

使用jQuery ajax API，您可以从某个网址获取文档中特定标记的内容：

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

重要的：

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

可能出现的问题：

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

Answer 3

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

- ＆GT; Demo＆lt; -

Answer 4

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

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

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

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

Answer 5

您可以通过jQuery“.load（）”方法从其他文件加载HTML内容。

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

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

Answer 6

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

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

6 个答案:

- ＆GT; Demo＆lt; -