通过链接将HTML文件加载到DIV中 [英] Loading an HTML file into a DIV with a link

问题描述

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

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

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

 < a href =＃computingonclick =document.getElementById（'MainBack'）。innerHTML ='< p> 1< / p>';'>计算< / a> 
  

但是我想将一个整个文件加载到它中：

 < a href =＃computingonclick =document.getElementById（'MainBack'）。innerHTML ='HTML FILE';>计算< / A> 
  

有什么建议吗？

做到这一点：

 < iframe src =link.htmlwidth =100％height = 300 >< / iframe中> 
  

现场演示

代码：

 < a href =＃computingonclick =document.getElementById（'MainBack'）。innerHTML ='< iframe src = \'http：//www.google.com \'scrolling = \\'''''frameborder = \'''''width = \'100％\\'height = \ '600px \\''>< / iframe>'> ;计算与LT; / A> 
  

或者您可以使用 lightbox 以非常漂亮的方式做到这一点......

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

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.

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

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

解决方案

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

<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 lightbox to do it in a really pretty manner...

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

这篇关于通过链接将HTML文件加载到DIV中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！