如何在 div 中加载页面？答案

【问题标题】：How do I load a page in a div?如何在 div 中加载页面？
【发布时间】：2011-05-24 15:24:27
【问题描述】：

有人告诉我，使用 Divs 而不是 iframe 是前进的方向，所以我使用横幅和主体中的框架。如何将我的 index.html 加载到我的 div 中？

【问题讨论】：

谁告诉你螺丝松了。
看看这个答案：stackoverflow.com/questions/6001118/…
为了稍微跟进@Thomas Shield 的说法，现在有一种观点认为，我们应该使用 javascript（jQuery 或 innerHTML 或其他）将内容插入到页面元素中，而不是使用 iframe。我从来没有看到一个很好的理由。我想那些认为这个好主意的人也是那些认为所有这些的人#！纯粹的 Ajax Gawker 怪物网站设计是一个好主意，即不应该被允许靠近计算机的总 barmcakes。
@Tom Anderson 同意，但公平地说，肯定有时间使用 AJAX 实时动态加载某些内容。但是，如果您只想在运行时将一个页面加载到另一个页面，请使用服务器端包含，或者如果您必须有一个完全不同的页面 - 使用 iframe。这就是他们的目的。
另外一点，使用 javascript/iframes 导入代码不利于搜索引擎优化。 Google 等将无法读取您标头中的代码。如果这包括您的导航，那么它可能会限制它可以抓取多少您的网站。我认为这听起来像是你真的在使用 PHP 包含或 ASP.NET MasterPage 解决方案。但是，我在下面提供了有关如何使用 Javascript/jQuery 执行此操作的答案。

标签： javascript html

【解决方案1】：

你尝试过 jquery 的 .load() 吗？使用服务器端技术，您可以轻松做到这一点。

【讨论】：

【解决方案2】：

使用 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);

通常我使用这种方法来动态加载小的 sn-ps 内容。如果要加载大量内容（如整个页面），使用 div 可能是个坏主意。对于这种情况，iframe 会更好。

【讨论】：

【解决方案3】：

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

但是，在我看来，您更像是在使用 MasterPage 结构（如果您有 ASP.NET）或文件导入

【讨论】：

【解决方案4】：

有人说对象而不是 iframe 是前进的方向。但是 div 和 iframe 是完全不同的东西。 iframe 就像页面中的一个单独页面。它有不同的上下文、不同的脚本、不同的 css... 使用 object.但是这样的事情不能用 div 来完成。

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

但这与 iframe 完全不同。

【讨论】：

【解决方案5】：

您为每个不同的文档创建一个单独的页面，然后使用某种形式的template 或include system 自动复制常见内容。

【讨论】：

【解决方案6】：

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

首先尝试使用您的服务器端语言来实现这一点。例如，如果您使用 PHP，则可以使用 include

如果您使用冷融合，请考虑使用cfinclude

如果你被告知要通过 javascript 来实现，那么唯一的方法就是 Ajax。

【讨论】：

不要通过 HTTP 获取您的包含。这是低效的，并且更有可能在共享主机中关闭一些配置。