将页面内容加载到变量中

Question

你好。

我对JavaScript没有太好的掌握，因此有一个不寻常且简单的问题。

如何以最少的代码量、没有框架，并且对性能影响最小的方式将页面内容加载到JavaScript变量中？

谢谢。

---

编辑

抱歉各位，我忘记说明了：从指定的url获取页面内容到JS变量中。

---

按照Brendan的建议进行操作。

我已经在其他地方看到过Brendan提供的替代方法并尝试过，但当时它没用，现在也不行。与此同时，测试的Firebug和浏览器（IE8和FF）没有报告任何错误。那么问题出在哪里呢？

- Fábio Antunes

---

帮我们一下 - 你是指当前页面的内容吗？ - Basic

如果您想要访问另一个页面，这个链接可能会有用：http://www.xul.fr/ajax/responseHTML-attribute.html - rsideb

Answer 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 和 status）下才执行。因此，不要将此函数的输出分配给任何变量。而是像这样做：

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

没有这个，我们只能看到 'undefined'...

- Brendan

---

我尝试了这个，用的是http://google.com。没有成功，也没有控制台错误。 - Fábio Antunes

请注意，URL 必须在同一域内，否则您将收到安全错误（这就是为什么 google.com 不起作用的原因）。请参阅此处的规格：http://www.w3.org/TR/XMLHttpRequest/#the-open-method。 - WSkid

@WSkid：谢谢。我不知道，那么我如何在我的域名之外的URL中使用它？ - Fábio Antunes

@Fabio：查询您的服务器端代码以获取外部数据。例如，使“getGoogle.php”从“google.com”返回数据，并在您的服务器端脚本中设置内容类型为“application/html”。 - Robin Maben

@conqenator：不幸的是，我只能使用JavaScript。有什么方法只用JS吗？ - Fábio Antunes

Answer 2

要获取 HTML 标签内的所有内容：

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

然后你可以将其包装在HTML标签中。这并没有捕获文档类型或任何其他位于HTML标签外的内容，但这是一种快速获取大部分内容的方法。

- wajiw

---

如果不需要头信息，那么这个也适用于正文。它甚至适用于每个唯一的标签。 - Mark Baijens

好的观点，这绝对是从任何你需要的地方快速而简单地获取一堆HTML的方法。 - wajiw

抱歉，我忘了提到。我需要从另一个页面获取内容，而不是JavaScript正在运行的页面。 - Fábio Antunes

不要忘记这个 bug：https://bugzilla.mozilla.org/show_bug.cgi?id=194231 - johngrinder

Answer 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

- Just Lucky Really

---

这是更好的答案。 - NilsB

Answer 4

从像/v1/data?format=json这样的url下载JSON数据的简单解决方案如下：

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

- asmaier