【问题标题】:Load page content to variable将页面内容加载到变量
【发布时间】:2011-05-12 20:35:27
【问题描述】:

美好的一天。

我从来没有真正掌握过 JavaScript,因此提出了这个不寻常且简单的问题。

如何以最少的代码、无框架且对性能的影响更小,将页面内容加载到 JavaScript 变量?

谢谢。


编辑

对不起各位。忘了说:从指定的url获取页面内容到一个JS var。


关注BrendanSuggestion

我已经在其他地方看到过 Brendan 替代方案并尝试过,但它当时不起作用,现在也不起作用。同时 Firebug 和经过测试的浏览器(IE8 和 FF)不报告任何错误。那怎么了?

【问题讨论】:

标签: javascript dom browser


【解决方案1】:

这是一个示例的修改版本,您可以在 w3schools.com 找到。

<script type="text/javascript">
    function loadXMLDoc(theURL)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari, SeaMonkey
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                alert(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET", theURL, false);
        xmlhttp.send();
    }
</script>

因此,只需将“example.html”设为您要加载的页面的任何类型的路径(相对或绝对),xmlhttp.responseText 将是一个包含响应内容的字符串。如果您希望将其存储为可遍历的 XML 文档,也可以使用 xmlhttp.responseXML。无论如何,只需将其中任何一个分配给您选择的变量,您就会拥有它!

请注意,'loadXMLDoc' 不直接返回任何内容,而是定义其成员之一('onreadystatechange')来完成该工作,并且仅在特定条件下(readyState 和状态)执行。结论 - 不要将此函数的输出分配给任何 var。而是做类似的事情:

var xmlhttp=false;
loadXMLDoc('http://myhost/mycontent.htmlpart');
if(xmlhttp==false){ /* set timeout or alert() */ }
else { /* assign `xmlhttp.responseText` to some var */ }

没有它,所有的人都可以看到'未定义'......

【讨论】:

  • 我试过了,用 http://google.com 代替。没有运气,没有控制台错误。
  • 请注意,URL 必须在同一个域中,否则您会收到安全错误(这就是 google.com 不起作用的原因)。在此处查看规格:w3.org/TR/XMLHttpRequest/#the-open-method
  • @WSkid:谢谢。我不知道,那么我如何将它用于我的域之外的网址?
  • @Fabio :查询您的服务器端代码以获取该外部数据。例如。让“getGoogle.php”从“google.com”返回数据,并在服务器端脚本中将内容类型设置为“application/html”。
  • @conqenator:不幸的是我只能使用 JavaScript。有什么办法只用JS吗?
【解决方案2】:

获取 html 标签内的所有内容:

var html = document.getElementsByTagName('html')[0];
var text = html.innerHTML;

然后您可以将其包装在 html 标记中。不会捕获 doctype 或您在 html 标记之外拥有的任何其他内容,但它是获取大部分内容的快速方法。

【讨论】:

  • +1。如果不需要标题信息,那么这也适用于正文。它甚至适用于每个唯一的标签。
  • 好点子,这绝对是从你需要的地方抓取一堆 html 的快速而肮脏的方式
  • 对不起,我忘了提。我需要从另一个页面获取内容。不是一个 Javascript 正在运行。
  • 不要忘记这个错误:bugzilla.mozilla.org/show_bug.cgi?id=194231
【解决方案3】:

我知道这个问题现在真的很老了,但是我在尝试将页面内容放入变量时遇到了同样的问题,但最终在 Javascript 中找到了一种方法:D(在互联网的帮助下.. .)

就这样吧……

我制作了一个带有回调的函数来获取所需的页面:

function getPageContents(callback,url,params) {
    http=new XMLHttpRequest();
    if(params!=null) {
        http.open("POST", url, true);
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    } else {
        http.open("GET", url, true);
    }
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            callback(http.responseText);
        }
    }
    http.send(params);
}

请注意,我以这种方式制作它,它不会接受 GET 参数。这是故意的,因为我不需要为我的应用程序使用 GET。如果设置了参数,这些将作为 POST 发送。

然后要使用该函数,假设我想向findpersoninfo.php 发布一个名称,它将输出该人员信息的 JSON 数组,我可以这样做:

getPageContents(function(result) {
    personinfo=JSON.parse(result);
    //Now I can do anything here with the personinfo array
},'http://localhost/findpersoniinfo.php','fname=stretch&lname=wright')

更进一步,你可以将它嵌套在另一个函数中,我们称之为getPersonInfo()

function getPersonInfo(fname,lname) {
    getPageContents(function(result) {
        personinfo=JSON.parse(result);
        //Now I can do anything here with the personinfo array
    },'http://localhost/findpersoninfo.php','fname='+fname+'&lname='+lname)
}

当然,我对 Javascript 的了解还处于起步阶段,欢迎任何有建设性的反馈:D

【讨论】:

  • 这是更好的答案。
【解决方案4】:

/v1/data?format=json等网址下载JSON数据的简单解决方案:

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", "/v1/data?format=json", false);
xmlhttp.send();
var data = JSON.parse(xmlhttp.responseText);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-01-18
    • 1970-01-01
    • 2016-05-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多