代码之家  ›  专栏  ›  技术社区  ›  Fábio Antunes

将页面内容加载到变量

  •  21
  • Fábio Antunes  · 技术社区  · 14 年前

    很好的一天。

    我从来没有真正精通过JavaScript,因此这个不寻常的简单问题。

    如何将页面内容加载到JavaScript变量中,使代码最少,没有框架,对性能的影响更小?

    谢谢。


    编辑

    抱歉,伙计们。我忘了提:将页面内容从指定的url获取到JS变量。


    跟随 Brendan Suggestion

    我已经在别的地方看过布伦丹的替代品并试过了,但当时没用,现在也没用。同时Firebug和被测试的浏览器(IE8和FF)没有报告任何错误。怎么了?

    4 回复  |  直到 8 年前
        1
  •  16
  •   pawel Brendan    10 年前

    这是一个示例的修改版本,您可以在 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 将是包含响应内容的字符串。你也可以使用 xmlhttp.responseXML 如果希望将其存储为可遍历的XML文档。不管怎样,只要把它们中的任何一个分配给你选择的变量,你就会得到它!

    请注意,“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 */ }
    

    没有它,我们只能看到“未定义”。。。

        2
  •  12
  •   wajiw    14 年前

    要获取html标记中的所有内容:

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

    然后你可以把它包装成html标签。不捕获doctype或html标记之外的任何内容,但这是获取大多数内容的快速方法。

        3
  •  6
  •   Just Lucky Really    10 年前

    我知道这个问题现在已经很老了,但是我在尝试将页面内容转换成变量时也遇到了同样的问题,但是我终于在Javascript:D中找到了一种方法(在internet的帮助下…)

    所以就这样。。。

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

    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。如果设置了参数,这些参数将作为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
  •  2
  •   asmaier    10 年前

    从类似url的url下载JSON数据的简单解决方案 /v1/data?format=json :

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