外部JavaScriptが吐くdocument.writeを取得する方法

documentWriteFromJavaScript_sh

見る人が見れば分かると思いますが、一応、自分用メモ。

ドコのナニとは言いませんが、外部の JavaScript が盛大に吐いた document.write の内容を、呼び出し元の JavaScript から文字列として取得する方法とかです。jQuery 必須。

※この記事は今後修正・更新する可能性があります。

基本的なアイディアは以下から拝借させていただきました。

相当古い記事なので色々ありますが、確かに目からウロコな方法です。

それなりに精査・見直しをして、jQuery で動くように書くとこんな感じに。あと、ついでなので、画面のスクロールに合わせて発動させる方法も合わせて仕込んでおきます。

var tr_top = jQuery('#widget_box').offset().top;

jQuery(this).on('scroll.tr_widget, load.tr_widget', function(){
	if (jQuery(this).scrollTop() + jQuery(this).height() > tr_top) {
		jQuery(this).off('scroll.tr_widget, load.tr_widget');	// remove events
		tr_func_widget(document);
	}
});

var tr_func_widget = function(d){
	var alts = [];
	d._write = d.write;
	d.write = function(s){ alts.push(s);}
	var src = "http://example.com/widget/js/widget.js";
	var js = d.createElement('script');
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('charset', 'utf-8');
	js.setAttribute('src', src);
	d.getElementsByTagName('head')[0].appendChild(js);
	var olfunc = function(){
		jQuery("#widget_box").append(alts.join("")); // fruits
		d.write = d._write; // restore d.write
	}
	js.onload = function(){ olfunc(); }; // script done.
	js.onreadystatechange  = function(){ // onload is not supported by IE.
		if (this.readyState == 'complete') { olfunc(); }
	};
};

コードを使う場合は、タイミングや環境差、呼び出し先の JavaScript の特性・特質など、もろもろを理解した上で適宜、必要箇所を修正ください。

状況によっては適していない、使えない場合もあります。あと、ブログエディタ上で色々手直ししているため、デバッグも必要かもしれません。

jQuery の呼び出し方がイケてないとか、Syntaxhighlighter も入れてないのかよ、とかも全部ご容赦ください。ワザとです。

異様に遅い外部 JavaScript が、よくよく見てみると document.write を多用してたので。おかげで遅延読み込みさせると色々問題があったりしてね。iframe とか、色々案はあったんですが、本当に苦肉の策です。

トリッキーなので実環境向きかどうかは分かりませんが、それにしてもスゴい発想と思います。

今ならもう少しスマート方法とか無いんですかね。と書いてから思うのであった…。

参考情報

コメントを記入