JavaScript : リンクのテキストの取得( Chrome、Firefox、IE / textContent、innerText、text、replace、jQuery )

標準でクロスブラウジング無しなら、replace なんですが、&lt; や &gt; に変換されている場合は、 innerHTML で < と > に戻るので、他は < と > を保持するのに対して、replace のみ 取り去ってしまいます。

となると、jQuery にまかせたほうが良いという事になります。

こうして並べてみると、Google Chrome の text が特異に見えます。元々は、IE の innerText が特異ではあったと思うのですが、Google Chrome が innerText を実装している流れで、text を改行ありにしたんだろうとは思います。改行無しなら textContent でいいわけですし。

<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<a id="target" href="http://winofsql.jp"><b>あああ</b><br/><b>いいい</b><br/></a>
<script type="text/javascript">

var obj = document.getElementById("target");

if ( obj.textContent ) {
	alert("textContent:" + obj.textContent );
}

if ( obj.innerText) {
	alert("innerText:" + obj.innerText);
}

if ( obj.text ) {
	alert("text:" + obj.text);
}

var htmlString = document.getElementById("target").innerHTML;
var htmlString = htmlString.replace(/<[^>]+>/g, ""); 
alert("replace:"+htmlString );

alert( "jQuery:" + $("#target").text());

</script>

	textContent	innerText	text	replace	jQuery
Chrome	改行なし	改行あり	改行あり	改行なし	改行なし
Firefox	改行なし	×	改行なし	改行なし	改行なし
IE10・IE11	改行なし	改行あり	改行なし	改行なし	改行なし
IE9	改行なし	改行あり	×	改行なし	改行なし
IE8	×	改行あり	×	改行なし	改行なし

動的に作成された IFRAME の キャラクタセットのブラウザ別の違い

以下のコードを各ブラウザで実行すると、それぞれ特徴のある結果となりました。
結論から言うと、現在のページのキャラクタセットをひきつぐのは Google Chrome
と Safari でした

<script type="text/javascript">
var my_iferame = document.createElement("iframe");
document.body.appendChild(my_iferame);
console.log( my_iferame.contentWindow.document.characterSet )
setTimeout( function() {console.log( my_iferame.contentWindow.document.characterSet )},10 )
</script>

現在のページは EUC-JP です。

IE9

ログ: _autodetect 
ログ: unicode 

Firefox

UTF-8
UTF-8

Google Chrome

EUC-JP
EUC-JP

Safari

EUC-JP
EUC-JP

Opera

なにも表示されません( おそらく未定義扱いのまま )


これらの結果を前提として URLENCODE は、IE9、Firefox、Opera は UTF-8 で処理されました
( Google Chrome と Safari は EUC-JP で URLENCODE されます )

ローカル記憶域 : window.localStorage

以下は、Microsoft のドキュメントに書かれている説明文です

ローカル記憶域のメカニズムは、複数のウィンドウにまたがり、
現在のセッション以後も存続します。 

localStorage 属性は、ドメインの永続記憶域を提供します。

この属性により、Web アプリケーションはパフォーマンス目的
で約 10 MB のユーザー データ (ドキュメント全体、ユーザー
のメールボックスなど) をクライアントに保存できます。 

格納場所や、容量の仕様としては、ブラウザ毎に違うと思いますが、
データに対するアクセスは単純で全てのブラウザで同じ書き方がで
きます。ただ、IE に関してだけで言うと、空文字列または、空文字
と同等とみなされるような参照を使って登録しようとするとエラーが
起きるかもしれません。現在のバージョンでは起きないかもしれない
ですが、以前発生していましたので注意して下さい。
( もし起きる場合は、new String("") をセットします )

登録(変更)方法

一般的な、「連想配列」として扱います。

localStorage["key文字列"] = 値;


削除方法

localStorage.removeItem("key文字列");

※ 全て削除は、localStorage.clear(); です。

一覧

localStorage['test'] = 'OK';
localStorage['message'] = 'YES';

var len = localStorage.length;
console.log(len);

var str = "";
for( var i = 0; i < len; i++ ) {
	// キーの値を取得
	str = localStorage.key( i );
	console.log(str + ":" + localStorage[str] );
}

関連する記事

ブラウザ別、localStorage の削除に関わる所作
Firefox で localStorage を編集するアドオン

JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました

CSS で書く場合は、2147483647 ですが、CSS では固定で定義するものなので、最初からこの値を使う事はとても考えにくいですが、後から動的に設定する JavaScript として考える場合、0x7FFFFFFF という値は暗記できますし、都合がいいです。( 10進数が欲しい場合は、開発者ツールで console.log(0x7fffffff) を実行 )

実際に IE、Firefox、Chrome、Opera、Safari で、zIndex が 998 で定義されている場所へ、ブックマークレットで新しいエレメントを追加して以下のコードで一番手前に来るかどうかを試しましたが、正しく動作しています。

parent.document.getElementById("if").style.position='absolute';
parent.document.getElementById("if").style.width='650px';
parent.document.getElementById("if").style.height='100px';
parent.document.getElementById("if").style.left='0px';
parent.document.getElementById("if").style.top='0px';
parent.document.getElementById("if").style.zIndex=0x7FFFFFFF;
parent.document.getElementById("if").style.borderColor='#000000';
parent.document.getElementById("if").style.borderWidth='1px';
parent.document.getElementById("if").style.borderStyle='solid';

関連する記事

ブックマークレット : Googleのドメイン内検索を任意のページで実行

JavaSctipt : ユーザ用(名前空間付き)イベント追加メソッドの作成

IE9 になると、addEventListener が追加されますが、それまでは以下のような
実装が一般的です。但し、既存の他の関数名と同じにならないように
"lightboxTool" という名前空間を作成しています。

if ( !window['lightboxTool'] ) {
	window.lightboxTool = {};
}
lightboxTool.addEvent = function( obj, evt, callback_func ) {
	if ( obj.attachEvent ) {
		obj.attachEvent( "on" + evt , callback_func );
	}
	else {
		obj.addEventListener( evt , callback_func , false );
	}
}

以下は、ウインドウのロードとアンロード時のイベントの登録です。
( Opera の unload では、ページを移動した時に実行されます )

function window_load() {
	alert("window_load");
}
function window_unload() {
	alert("window_unload");
}
lightboxTool.addEvent(window, 'load', window_load);
lightboxTool.addEvent(window, 'unload', window_unload);

JavaScript : 最後にクリックしたテキストフィールドを保存する

onClick では、左クリックのみ対象ですが、右クリックが必要な場合は、
onMousedown を使うといいと思います。変数や関数は window オブジェクト
に lbox20100211 というプロパティを作成して登録しています。保存される
オブジェクトは、lbox20100211.cur にセットされます。

// window オブジェクトにグローバルな名前空間を作成
// ※ lbox20100211
window.lbox20100211 = {};

// クリック時のイベント
// lbox20100211.cur に最後にクリックされたフィールドを保存する
lbox20100211.clickEvent = function(e) {

	var userAgent = window.navigator.userAgent.toLowerCase();

	// クリックされたフィールドを保存
	if (userAgent.indexOf("msie") > -1) {
		window.lbox20100211.cur = window.event.srcElement;
	}
	else {
		window.lbox20100211.cur = e.currentTarget;
	}

}

// ページロード時のイベント
lbox20100211.registClickEvent = function() {

	var userAgent = window.navigator.userAgent.toLowerCase();

	var obj = document.getElementsByTagName("INPUT");
	var len = obj.length;
	var i,str;

	// INPUT 要素を全て取得
	for( i = 0; i < len; i++ ) {

		// type が text のみ取得
		str = obj[i].getAttribute( "type" )
		if ( str == null ) {
			str = "TEXT";
		}
		if ( str.toUpperCase() == "TEXT" ) {
			if (userAgent.indexOf("msie") > -1) {
				obj[i].attachEvent('onclick', lbox20100211.clickEvent);
			}
			else {
				obj[i].addEventListener('click', lbox20100211.clickEvent, false);
			}
		}
	}

}

// ページロードが終了した時に実行する処理を登録
if (window.attachEvent){
	window.attachEvent('onload', lbox20100211.registClickEvent);
}
else {
	window.addEventListener('load', lbox20100211.registClickEvent, false);
}