Возврат содержимого HTML в виде строки с заданным URL. Функция Javascript

Я хочу написать функцию javascript, которая возвращает HTML-содержимое в виде строки с заданным URL-адресом функции. Я нашел аналогичный ответ на Stackru.

Я пытаюсь использовать этот ответ, чтобы решить мою проблему.

Тем не менее, кажется, как будто document.write() ничего не пишет. Когда я загружаю страницу, я получаю пустой экран.

<html>
<head>
</head>
<body>  
  <script type="text/JavaScript">
  function httpGet(theUrl)
  {
    var xmlHttp = null;

    xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false );
    xmlHttp.send( null );
    return xmlHttp.responseText;
  }
  document.write(httpGet("https://stackru.com/"));
  </script>
</body>
</html>
Источник

6 ответов

Решение

Вам нужно вернуться, когда readystate==4, например

function httpGet(theUrl)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            return xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", theUrl, false );
    xmlhttp.send();    
}
Источник

Единственное, что я нашел для кросс-сайта, это эта функция:

<script type="text/javascript">
var your_url = 'http://www.example.com';

</script>

<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript">
// jquery.xdomainajax.js  ------ from padolsey

jQuery.ajax = (function(_ajax){

    var protocol = location.protocol,
        hostname = location.hostname,
        exRegex = RegExp(protocol + '//' + hostname),
        YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
        query = 'select * from html where url="{URL}" and xpath="*"';

    function isExternal(url) {
        return !exRegex.test(url) && /:\/\//.test(url);
    }

    return function(o) {

        var url = o.url;

        if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {

            // Manipulate options so that JSONP-x request is made to YQL

            o.url = YQL;
            o.dataType = 'json';

            o.data = {
                q: query.replace(
                    '{URL}',
                    url + (o.data ?
                        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
                    : '')
                ),
                format: 'xml'
            };

            // Since it's a JSONP request
            // complete === success
            if (!o.success && o.complete) {
                o.success = o.complete;
                delete o.complete;
            }

            o.success = (function(_success){
                return function(data) {

                    if (_success) {
                        // Fake XHR callback.
                        _success.call(this, {
                            responseText: data.results[0]
                                // YQL screws with <script>s
                                // Get rid of them
                                .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
                        }, 'success');
                    }

                };
            })(o.success);

        }

        return _ajax.apply(this, arguments);

    };

})(jQuery.ajax);



$.ajax({
    url: your_url,
    type: 'GET',
    success: function(res) {
        var text = res.responseText;
        // then you can manipulate your text as you wish
        alert(text);
    }
});

</script>
Источник

После получения ответа просто вызовите эту функцию, чтобы добавить данные к элементу тела

function createDiv(responsetext)
{
    var _body = document.getElementsByTagName('body')[0];
    var _div = document.createElement('div');
    _div.innerHTML = responsetext;
    _body.appendChild(_div);
}

Код @satya изменен, как показано ниже

function httpGet(theUrl)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            createDiv(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", theUrl, false);
    xmlhttp.send();    
}
Источник

Вы не можете сделать это в общем случае

...из-за той же политики происхождения , которую браузеры используют для ограничения доступа к сайту B из кода, работающего на сайте A. Когда вы пытаетесь (с XMLHttpRequestили же fetchд.), вы получите сообщение об ошибке, говорящее что-то вроде:

В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Подробнее в ответах на этот вопрос и в ссылке СОП выше. Но в основном: речь идет не о том, чтобы люди не видели контент сайта B, а о невозможности сделать это из контекста (браузера), который может хранить аутентификационную информацию для текущего пользователя, которая раскрыла бы его личную информацию, если бы вы могли читать сайт B. контент из браузера этого пользователя.

Очень небольшое количество веб-сайтов может обслуживать свой контент, используя заголовки совместного использования ресурсов между источниками (вышеупомянутыеAccess-Control-Allow-Originи другие), чтобы позволить любому сайту читать их содержимое, но это очень необычно.

Если вы хотите получить содержимое подавляющего большинства сайтов, вам придется использовать для этого код, работающий не в браузере (например, код, работающий где-то на сервере). На протяжении многих лет было много сайтов, которые позволяли вам запрашивать их с помощью URL-адреса и возвращать вам содержимое этого URL-адреса, запрошенного их сервером (и, таким образом, не подпадает под SOP, поскольку информация аутентификации на основе браузера текущего пользователя для другого сайт не используется), но они, как правило, возникают, а затем снова исчезают, поскольку на самом деле нет хорошей модели дохода для поддержки требований к пропускной способности. В конце концов, зачем платить за это кому-то еще, когда вы можете просто запустить свой собственный сервер дешево (или даже бесплатно) и сделать это самостоятельно.

Источник

Вот версия принятого ответа, что 1) returns значение из функции (исправление) и 2) не нарушается при использовании "use strict";

Я использую этот код для предварительной загрузки .txt файл в мой <textarea> когда пользователь загружает страницу.

function httpGet(theUrl)
{
    let xmlhttp;
    
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            return xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", theUrl, false);
    xmlhttp.send();
    
    return xmlhttp.response;
}
Источник

На некоторых веб-сайтах XMLHttpRequestможет отправить вам что-то вроде <script src="#"></srcipt>. В этом случае попробуйте использовать HTML-документ, такой как скрипт в разделе:

      <html>
  <body>
    <iframe src="website.com"></iframe>
    <script src="your_JS"></script>
  </body>
</html>

Теперь вы можете использовать JS для получения текста из HTML, например getElementbyId.

Но это может не работать для некоторых сайтов с междоменной блокировкой.

Источник
Другие вопросы по тегам