web-dev-qa-db-ja.com

ページコンテンツを変数に読み込む

おはようございます。

私は実際にJavaScriptに精通したことがないので、この珍しくて単純な質問です。

最小限のコードでフレームワークを使用せず、パフォーマンスへの影響を最小限に抑えながら、ページコンテンツをJavaScript変数に読み込むにはどうすればよいですか？

ありがとうございます。

[〜＃〜] edit [〜＃〜]

ごめんなさい言及するのを忘れました：指定されたURLからJS変数へのページコンテンツを取得します。

次の ブレンダン提案

私はすでに他の場所でブレンダンの代替品を見て試してみましたが、当時は機能しませんでした。現在は機能していません。一方、Firebugとテストされたブラウザー（IE8およびFF）はエラーを報告しません。どうしたの？

javascriptdombrowser
23
Fábio Antunes

これは、 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」は何も直接返さないが、そのジョブの実行と特定の条件（readyStateおよびstatus）でのみ実行するメンバー（「onreadystatechange」）の1つを定義することに注意してください。結論-この関数の出力をどの変数にも割り当てないでください。むしろ次のようなことをしてください：

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

それがなければ、見ることができるのは「未定義」だけです...

16
Brendan

HTMLタグ内のすべてを取得するには：

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

次に、それをhtmlタグでラップできます。 doctypeなど、htmlタグの外側にあるものはキャプチャしませんが、ほとんどのコンテンツをすばやく取得できます。

12
wajiw

私はこの質問が本当に古いことを知っていますが、ページのコンテンツを変数に入れようとするのと同じ問題を抱えていましたが、最終的に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を使用する必要がないため、これは意図的なものです。 paramsが設定されている場合、これらはPOSTとして送信されます。

次に、関数を使用するには、その人の情報のJSON配列を出力する_findpersoninfo.php_に名前を投稿したいとしましょう、私はこれを行うことができます：

_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

6
Just Lucky Really

/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);
2
asmaier