ニコ動をJSで動的に埋め込みたい！

何が問題なの

Youtubeだと割とすんなり実装できます

Youtubeなら

// 動画のIDを指定
var movieId = 'xxxxx';
// ターゲットをキャッシュ
var target = document.getElementById('movie');

// ターゲット要素に動画を埋め込み
target.innerHTML = '<iframe src="https://www.youtube.com/embed/' + movieId + '" width="580" height="326" frameborder="0" allowfullscreen></iframe>';

みたいに書けば簡単に動画の埋め込みができる。

でもニコ動だと……

ニコ動でも同じ様な事をやりたいんだよね。
ということで、素直に実装しようとすると

// 動画のIDを指定
var movieId = 'smxxxxx';
// ターゲットをキャッシュしておく
var target = document.getElementsByClassName('movie')[0];

// ニコ動埋め込みタグに含まれるscript要素を作成する
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://ext.nicovideo.jp/thumb_watch/' + movieId + '?w=580&h=326');

// ターゲット要素に動画(を呼ぶスクリプト)を埋め込み
target.appendChild(script);

こんな感じになるよね。
でも、これだと上手く動いてくれない。（→このあたり参考）
どうやら、ここで読み込むニコ動のスクリプトは、最終的にdocument.writeでembed要素の書き込みを行っている。
でも、appendChildして読み込んだJSからのdocument.writeは上手く動かない。

じゃあどうすればいいの

結論から言えば、document.writeの動作を、element.appendChildと同様の動作にすればよい。

ところで、JavaScriptは、既存のメソッドを上書きする事ができる。
そこで、一時的に、document.writeの動作を、element.appendChild同様の動作としてしまう。

var script, target;

// 動画のIDを指定
var movieId = 'smxxxxx';
// ターゲットをキャッシュしておく
target = document.getElementById('movie');

// 元のメソッドは後で書き戻すので一時待避させておく。
var write = document.write;

// 新しい関数で上書き
document.write = function (arg) {
    // ここがメイン：動画表示部に引数として渡された要素を挿入
    target.innerHTML = arg;

    // 気が済んだのでdocument.writeを戻す
    document.write = write;
};

// 埋め込み動画を呼び出す部分
// ニコ動埋め込みタグに含まれるscript要素を作成する
script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', 'http://ext.nicovideo.jp/thumb_watch/' + movieId + '?w=580&h=326');

// ターゲット要素に動画を埋め込み
target.appendChild(script);

やったね、動画が表示されたよ。
これでいくらでもニコ動埋め込み放題だね！