给定 URL，将 HTML 内容作为字符串返回。 Javascript 函数答案

【问题标题】：Return HTML content as a string, given URL. Javascript Function给定 URL，将 HTML 内容作为字符串返回。 Javascript 函数
【发布时间】：2012-05-25 10:01:22
【问题描述】：

我想编写一个 javascript 函数，将 HTML 内容作为给定 URL 的字符串返回给函数。我在 Stackoverflow 上找到了类似的答案。

我正在尝试使用this answer 来解决我的问题。

然而，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://stackoverflow.com/"));
  </script>
</body>
</html>

【问题讨论】：

使用 .innerHTML，而不是 document.write。
你的意思是像httpGet("http://stackoverflow.com/").innerHTML; 吗？这也加载了一个空白页面。
下面的答案描述了您的需求。
Chrome 77.0.3865.90，收到警告(index):40 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

标签： javascript html

【解决方案1】：

您需要在 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();    
}

【讨论】：

我正在使用 Chrome，控制台错误显示为 Uncaught ReferenceError: xmlHttp is not defined
这不会导致违反同源策略吗？ :en.wikipedia.org/wiki/Same_origin_policy
@SoboLAN 是的。（至少对我来说）
@Twitterhandlejasoki 也许你开启了“use strict”？
xmlhttp.open("GET", theUrl, false ) 在主线程上不受支持。见stackoverflow.com/q/14220321

【解决方案2】：

我找到的唯一一个跨站点功能是：

<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>

【讨论】：

我总是得到响应文本数据结果为 0 并抛出异常。
不幸的是，雅虎 API 已于 2019 年 3 月关闭，因此不再有效。 :(

【解决方案3】：

收到响应后，只需调用此函数将数据附加到您的正文元素

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();    
}

【讨论】：

【解决方案4】：

这是已接受答案的一个版本，即 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;
}

【讨论】：

【解决方案5】：

在某些网站中，XMLHttpRequest 可能会向您发送类似<script src="#"></srcipt> 的信息。在这种情况下，请尝试使用类似以下脚本的 HTML 文档：

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

现在您可以使用 JS 从 HTML 中获取一些文本，例如 getElementbyId。

但这可能不适用于某些具有跨域阻止功能的网站。

【讨论】：