Не удается загрузить внешнюю страницу с помощью 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');
});

Может ли кто-нибудь помочь мне.

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

Ответы

Ответ 1

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

Чистым вариантом javascript является Yahoos YQL service. Существует плагин, который расширяет jQuery.ajax, чтобы разрешить внешние домены: https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js

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

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

Ответ 2

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

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

Ответ 3

$('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 в этой области.

Ответ 5

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

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

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