web-dev-qa-db-ja.com

jQuery.loadで外部ページをページのdivに読み込めません

外部HTMLページを自分のページのdivに読み込むことができません。

私のjqueryコードは：

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
 });

私のHTMLページは

<html><body><div id="external"></div></body></html>

別のJQueryコードも使用してみました

$(document).ready(function() {
    $('#external').load('http://google.com');
});

誰か助けてください。

ありがとうアマル

jqueryloadexternal
16
Amal Kumar S

ブラウザの制限により、ほとんどのAjaxリクエストは「同じオリジンポリシー」の対象となります。つまり、ほとんどの場合、jQueryのajaxメソッドを使用して、プロキシ、YQL、JSONP、または同等の手法を使用せずに外部ドメインからデータをフェッチすることはできません。

純粋なJavaScriptオプションは、YahooのYQLサービスです。 jQuery.ajaxを拡張して外部ドメインを許可するプラグインがあります： https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

このプラグインを使用すると、質問のajaxサンプルが許可されます。

別のオプションは、サーバー側のプロキシを使用してから、ajaxを使用してそのページを要求することです。サーバーでPHPを実行できる場合は、「php ajax proxy」のようなものを探してみてください。たくさんの結果が得られます。

16
David Hellsing

最初にJSファイル https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js をダウンロードし、jsファイルをページに含めます。以下は、外部ページをロードするために使用した関数です。

       function test () {
         $.ajax({
           url: 'http://external_site.com',
           type: 'GET',
           success: function(res) {
             var content = $(res.responseText).text();
             alert(content);
           }
         });
       }

これは、外部サイトからコンテンツを取得するのに役立ちました。

7
Amal Kumar S

$('div#external').html();は、divオブジェクト内のHTMLを空の文字列に設定します。

responseは返されるHTMLであるため、おそらく次のことを意味します。

$(document).ready(function(){
     var url = 'http://www.google.com';
     $.get(url, function(response) {
          $('div#external').html(response);
     });
});

JQuery $.get に関するドキュメントは、このような例を提供します。

次の問題は、クロスドメインリクエストを作成しようとしていることです。この領域でのJavaScriptのセキュリティ制限を回避する方法の詳細については、 this site を参照してください。

2
Lightness Races in Orbit

同じオリジンポリシー により、ドメイン外へのリクエストの送信にかなり制限されます。 [〜＃〜] jsonp [〜＃〜] は回避策ですが、役立つ場合があります。

1
Rafay

クロスドメイン制限を回避するには、代わりにjQuery.getJSONを試してください（JSONPを使用）。

jQuery.getJSON(url, function(data){
     // your code here
         $('div#external').html(data);      
     });

PS：ただし、URL変数には次のようなコールバック関数を含める必要があります： "http://www.example.com/?t="+v+"&callback=?"

1
DrStrangeLove