如何在页面加载时将网页内容加载到 div 中？答案

【问题标题】：How can I load webpage content into a div on page load?如何在页面加载时将网页内容加载到 div 中？
【发布时间】：2012-04-15 08:49:43
【问题描述】：

不使用iframe，是否可以加载内容

<div id="siteloader"></div>

使用外部网站，例如somesitehere.com

页面何时加载？ - 我知道如何从文件中加载内容，但不确定如何加载整个网站？

非常感谢，

【问题讨论】：

iframe 比加载html页面的对象更好stackoverflow.com/questions/924946/…

标签： jquery ajax

【解决方案1】：

这可以在没有iframe 的情况下完成。使用jQuery，因为它在标题中提到。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Load remote content into object element</title>
  </head>
  <body>
    <div id="siteloader"></div>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
      $("#siteloader").html('<object data="http://tired.com/">');
    </script>
  </body>
</html>

【讨论】：

请注意，如果远程页面的X-Frame-Options header 不允许这样做，这将不起作用。

【解决方案2】：

看看jQuery's .load()函数：

<script>
    $(function(){
        $('#siteloader').load('http://www.somesitehere.com');
    });
</script>

但是，这只适用于 JS 文件的同一域。

【讨论】：

这个 jQuery .load() 方法比其他响应中提出的 jQuery .get() 方法更好，因为它允许您从外部 url DOM 加载特定项目（例如，只是内容一个 div 而不是整个页面）。这样你就可以避免像两个“body”这样的重复标记，所以： $('#result').load('ajax/test.html #container');

【解决方案3】：

使用 jQuery 可以，但不能使用 ajax。

function LoadPage(){
  $.get('http://a_site.com/a_page.html', function(data) {
    $('#siteloader').html(data);
  });
}

然后将onload="LoadPage()"放在body标签中。

虽然如果你遵循这条路线，一个php版本可能会更好：

echo htmlspecialchars(file_get_contents("some URL"));

【讨论】：

你不认为$.get 是Ajax 吗？
不，这在 ajax 中是不可能的，但仅在 jQuery 中是可能的。页面加载后可以调用 $.get() 将页面转储到指定的 div 中
您的示例是在 jQuery 中使用 Ajax。我认为您试图解释与您的示例不同的东西。
@Njdart: $.get 是一个简写的 Ajax 函数。

【解决方案4】：

您不能使用 AJAX 从其他站点（域）注入内容。 iFrame 适合这类事情的原因是您可以将源指定为来自另一个域。

【讨论】：