ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   Jun 23

[Javascript][node.js]jsdomを使ってみる

by zuqqhi2 at 2013年6月23日
Pocket

node.js上でjqueryを使うにはjsdomとdomToHtmlを利用するらしい。
それらを利用してjqeuryでbody以下にp要素を新たに追加するコードを書いてみた。

var http = require("http");
var url = require("url");
var fs = require('fs');
var jsdom = require('jsdom');
var path = require('path');
var jsdomHome = path.dirname(require.resolve('jsdom'));
var domToHtml = require(path.resolve(jsdomHome, 'jsdom/browser/domtohtml'));

var jquery = 'http://code.jquery.com/jquery-1.10.1.min.js';

function start() {
    function onRequest(request, response) {
        var pathname = url.parse(request.url).pathname;
        console.log("Request for " + pathname + " received.");

        var content = fs.readFileSync("./index.html", 'utf-8')
        var document = jsdom.jsdom(content);
        var window = document.createWindow();

        jsdom.jQueryify(window, jquery, function(window, $) {
            $('body').append('<div>More Hello world!!</div>');
            response.writeHead(200, {"Contet-Type": "text/plain"});
            response.write(domToHtml.domToHtml(document, true));
            response.end();
        });
    }
    http.createServer(onRequest).listen(8080);
    console.log("Server has started.");
}

start();

コンテンツとして使用するhtmlファイルは以下。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>EmberJS Test</title>
    </head>
    <body>
        <div>Hello, world!</div>
    </body>
</html>

アクセスしてみると、

Hello, world!
More Hello world!!

と表示される。

Related Posts

Pocket

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.