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

Question

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

有几个主题,但没有一个完全回答我的问题.

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

例如,这会将文本加载到我的"MainBack"DIV中.它工作正常:

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

Run Code Online (Sandbox Code Playgroud)

但我想像这样加载整个文件:

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

Run Code Online (Sandbox Code Playgroud)

有什么建议？我对此很新!

Answer 1

Myl*_*ray 8

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

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

Run Code Online (Sandbox Code Playgroud)

现场演示

码:

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

Run Code Online (Sandbox Code Playgroud)

或者你可以使用灯箱以非常漂亮的方式做到这一点......

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

Answer 2

Pau*_*ine 6

使用jQuery ajax API,您可以从某个URL获取文档中特定标记的内容:

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

Run Code Online (Sandbox Code Playgroud)

重要:

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

什么可能出错:

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

Answer 3

Mār*_*dis 0

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	15 年，3 月前
查看次数：	66839 次
最近记录：	10 年前