2012-04-01 155 views

回答

48

这是可能没有iframe专门做。由于标题中提到了jQuery,因此可以使用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> 
+5

注意,如果远程页面的[X-Frame-Options标题](https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options)不允许使用它,则这将不起作用。 – 2014-05-24 20:37:47

2

您无法使用AJAX从其他网站(域)注入内容。 iFrame适用于这些类型的事情的原因是,您可以将来源指定为来自其他域。

35

看看到jQuery's .load()功能:

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

然而,这仅适用于JS文件的同一个域。

+5

此jQuery .load()方法比其他响应中提出的jQuery .get()更好,因为它允许您从外部URL DOM中加载特定项目(例如,仅包含一个股利,而不是整页)。这样你就可以避免像两个“body”一样重复标记,所以:$('#result')。load('ajax/test.html #container'); – tomasofen 2013-04-01 07:28:50

8

使用jQuery,有可能,但不能使用ajax。

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

,然后将body标签onload="LoadPage()"

但如果你遵循这条路线,一个PHP版本可能会更好:

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

你不觉得'$ .get'是Ajax吗? – xyz 2012-04-01 11:01:45

+0

不,这在ajax中是不可能的,但仅在jQuery中才有可能。一旦页面已经加载将页面转储到指定的div中,$ .get()就可以被调用。 – Njdart 2012-04-01 11:04:29

+1

您的示例在jQuery中使用Ajax。我认为你正试图解释一些与你的例子不同的东西。 – xyz 2012-04-01 11:06:21