Не удается загрузить внешнюю страницу с помощью jQuery.load в div на моей странице - PullRequest
Новая
       35

Не удается загрузить внешнюю страницу с помощью jQuery.load в div на моей странице

16 голосов
/ 20 февраля 2011

Я не могу загрузить внешнюю 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');
});

Может кто-нибудь, пожалуйста, помогите мне.

Спасибо, Амаль

Ответы [ 5 ]

16 голосов
/ 20 февраля 2011

Из-за ограничений браузера большинство запросов Ajax подчиняются «той же политике происхождения». Это означает, что в большинстве случаев вы не можете использовать jjuerys ajax-методы для извлечения данных из внешних доменов, не используя Proxy, YQL, JSONP или эквивалентную технику, чтобы обойти это.

Опция чистого JavaScript - это YQL-сервис Yahoo. Существует плагин, который расширяет jQuery.ajax для разрешения внешних доменов: https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

Использование этого плагина должно разрешить пример ajax в вашем вопросе.

Другой вариант - использовать прокси на стороне сервера, а затем запросить эту страницу с помощью ajax. Если ваш сервер может работать с PHP, попробуйте поискать что-то вроде «php ajax proxy», и вы получите множество результатов.

7 голосов
/ 16 января 2012

Сначала загрузите файл 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);
           }
         });
       }

Это помогло мне получить контент с внешнего сайта.

2 голосов
/ 20 февраля 2011

$('div#external').html(); устанавливает HTML-код внутри вашего div объекта в пустую строку.

Поскольку response - это возвращенный HTML, вы, вероятно, имели в виду: 

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

Документация jQuery для $.get содержит пример, подобный этому.

Ваша следующая проблема будет в том, что вы пытаетесь сделать междоменный запрос. См. этот сайт для получения дополнительной информации о том, как обойти ограничения безопасности Javascript в этой области.

1 голос
/ 20 февраля 2011

, чтобы обойти перекрестное ограничение домена, попробуйте вместо этого jQuery.getJSON (используя JSONP). 

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

P.S .: но ваша переменная url должна включать функцию обратного вызова следующим образом: «http://www.example.com/?t="+v+"&callback=?"

1 голос
/ 20 февраля 2011

Из-за той же политики происхождения вы довольно ограничены в отправке запросов за пределы вашего домена. JSONP это обходной путь, может быть, это поможет.

...