web-dev-qa-db-fra.com

Charger le contenu de la page dans une variable

Bonjour.

Je n'ai jamais vraiment bien compris JavaScript, donc cette question inhabituelle et simple.

Comment puis-je charger un contenu de page dans une variable JavaScript, avec le moins de code, pas de framework et le moins d'impact possible sur les performances?

Merci.

[~ # ~] modifier [~ # ~]

Désolé les gars. J'ai oublié de mentionner: obtenir le contenu de la page à partir de l'URL spécifiée vers une var JS.

Suite BrendanSuggestion

J'avais déjà vu une alternative à Brendan ailleurs et je l'avais essayé, mais cela ne fonctionnait pas à l'époque, et cela ne fonctionne pas maintenant. Pendant ce temps, Firebug et les navigateurs testés (IE8 et FF) ne signalent aucune erreur. Alors, qu'est-ce qui ne va pas?

javascriptdombrowser
23
Fábio Antunes

Ceci est une version modifiée d'un exemple que vous pouvez trouver sur 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>

Il suffit donc de faire de "example.html" un chemin quelconque (relatif ou absolu) vers la page que vous souhaitez charger, et xmlhttp.responseText sera une chaîne contenant le contenu de la réponse. Vous pouvez aussi utiliser xmlhttp.responseXML si vous souhaitez qu'il soit stocké en tant que document XML traversable. Quoi qu'il en soit, attribuez simplement l'un de ces paramètres à une variable de votre choix, et vous l'avez!

Notez que 'loadXMLDoc' ne retourne rien directement mais définit un de ses membres ('onreadystatechange') pour faire ce travail, et pour le faire uniquement dans certaines conditions (readyState et status). Conclusion - n'attribuez la sortie de cette fonction à aucune variable. Faites plutôt quelque chose comme:

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

Sans cela, tout ce que l'on peut voir est "indéfini" ...

16
Brendan

Pour tout mettre dans les balises html:

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

Ensuite, vous pouvez envelopper cela dans des balises html. Ne capture pas doctype ou toute autre chose que vous auriez en dehors des balises html, mais c'est un moyen rapide de récupérer la plupart du contenu.

12
wajiw

Je sais que cette question est vraiment ancienne maintenant, mais j'ai eu le même problème en essayant d'obtenir le contenu de la page dans une variable, mais j'ai finalement trouvé un moyen en Javascript: D (avec l'aide d'Internet ...)

Alors c'est parti ...

J'ai fait une fonction avec un rappel pour obtenir la page souhaitée:

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

Notez que je l'ai fait de telle manière, qu'il n'acceptera pas les paramètres GET. C'est intentionnel, car je n'ai pas besoin d'utiliser GET pour mon application. Si des paramètres sont définis, ils seront envoyés en tant que POST.

Ensuite, pour utiliser la fonction, disons que je veux publier un nom dans findpersoninfo.php Qui produira un tableau JSON de ces informations sur les personnes, je peux le faire:

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

En allant plus loin, vous pouvez l'imbriquer dans une autre fonction, appelons-la 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)
}

Bien sûr, ma connaissance de Javascript en est encore à ses balbutiements, et accueillez vos commentaires constructifs

6
Just Lucky Really

Une solution simple pour télécharger des données JSON à partir d'une URL comme /v1/data?format=json:

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