2012-04-01 16 views
29

は、例えば外部のサイトとAjax/jQuery - ページの読み込み時にdivにWebページのコンテンツを読み込みますか?アイフレームを使用せずに

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

の内容をロードすることも可能ですsomesitehere.com

ページが読み込まれるときは? - ファイルからコンテンツを読み込む方法はわかっていますが、サイト全体を読み込む方法がわかりませんでしたか?あなたはAJAXを使用して別のサイト(ドメイン)からコンテンツを挿入することはできません

多くのおかげで、

答えて

48

これは、具体的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> 
+5

リモートページの[X-Frame-Optionsヘッダー](https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options)で許可されていない場合、これは機能しません。 –

2

。 iFrameがこれらの種類に適している理由は、別のドメインからのソースを指定できることです。

35

jQuery's .load()関数に見てみましょう:

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

はしかし、これが唯一のJSファイルの同じドメインで動作します。

+5

このjQueryの.LOAD()、それはあなたが(外部のURL DOMからの例えば、単にコンテンツを特定のアイテムをロードすることを可能にするための方法は、他の回答で提案されているjQueryのに.get()よりも優れていますdivとフルページではありません)。そうすれば、2つの "body"のようなマークアップが重複しないようにすることができます:$( '#result')load( 'ajax/test.html #container'); – tomasofen

8

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")); 
+24

'$ .get'はAjaxだと思いませんか? – xyz

+0

いいえ、これはajaxでは不可能ですが、jQueryだけでも可能です。ページが指定されたdivにページをダンプするためにロードされたら、$ .get()を呼び出すことができます – Njdart

+1

あなたの例では、jQueryでAjaxを使用しています。私は、あなたの事例とは異なる何かを説明しようとしていると思います。 – xyz

関連する問題