如何在 div 中加载页面？

Question

我听说使用Divs而不是iframes是未来的趋势，所以我正在使用我的横幅和主体框架。如何将我的index.html加载到我的div中？

- 124697

---

告诉你那话的人有毛病。 - Thomas Shields

看一下这个答案：http://stackoverflow.com/questions/6001118/display-element-from-other-page-on-my-site-with-document-getelementbyid/6001162#6001162 - Daniel O'Hara

稍微跟随@Thomas Shield所说的，现在有一种思路认为，我们应该使用JavaScript（jQuery、innerHTML或其他方法）将内容插入到页面元素中，而不是使用iframe。我从未看过对此的充分理由。我想那些认为这是一个好主意的人也是那些认为所有 #! 全 Ajax Gawker 网站设计都是一个好主意的人，也就是完全疯狂的人，不应该接近电脑。 - Tom Anderson

@Tom Anderson同意这一点，但公平地说，有时候确实需要使用AJAX实时动态加载某些内容。但如果您只是想在运行时将一个页面加载到另一个页面中，请使用服务器端包含，或者如果您必须使用完全不同的页面，则使用iframe。那就是它们存在的目的。 - Thomas Shields

另外一个要点是，使用JavaScript / iframes导入代码对搜索引擎优化不利。Google等无法读取您标题中的代码。如果这包括您的导航，则可能会限制其可以爬行的站点数量。我认为您真正需要的是PHP include或ASP.NET MasterPage解决方案。但是，我已经提供了如何使用JavaScript / jQuery实现此目的的答案。 - Curtis

Answer 1

使用jQuery：

jQuery('#myDiv').load('http://example.com/somefile.html');

没有jQuery：

var request = new XMLHttpRequest();
request.open('GET', 'http://example.com/somefile.html', true);
request.onreadystatechange = function (anEvent) {
   if (request.readyState == 4) {
      if(request.status == 200) {
         document.getElementById("myDiv").innerHTML = request.responseText;
      }
   }
};
request.send(null);

通常我使用这种方法来动态加载小段内容。如果你需要加载非常大量的内容（比如整个页面），使用 div 可能不是一个好主意。在这种情况下，最好使用 iframe。

- Vivin Paliath

Answer 2

您是否尝试过使用jQuery的.load()方法。结合服务端技术，您可以轻松实现此功能。

- MLS

Answer 3

$(".divClassHere").load("url path here");

然而，对我来说，你更像是在寻找一个MasterPage结构（如果你使用的是ASP.NET）或文件导入。

- Curtis

Answer 4

有��说，对象比iframe更为先进。但是div和iframe是完全不同的东西。Iframe就像页面中的一个独立页面。它有不同的上下文、脚本和css……使用object可以实现类似的效果。但是，使用div无法做到这一点。

你可以将内容加载到div中。你可以使用javascript来改变div的内容。通过ajax调用，可以获取url的内容，并使用javascript将其放入div中。

但这与iframe完全不同。

- GolezTrol

Answer 5

你需要为每个不同的文档创建一个单独的页面，然后使用某种形式的模板或包含 系统来自动复制共同的内容。

- Quentin

Answer 6

你使用的是哪种服务器端语言？

首先尝试使用你的服务器端语言来实现这个。例如，如果你使用的是PHP，你可以使用include。

如果你使用的是ColdFusion，请考虑使用cfinclude。

如果你被要求通过JavaScript来完成它，那么唯一的方法就是Ajax。

- user160820

---

不要通过HTTP获取您的包含文件。这样做效率低下，并且更有可能在共享主机中遇到配置被关闭的情况。 - Quentin