このコードが IE9 で動きました。IE以外では全部動いてます。![]()
<script type="text/javascript"> Object.prototype.myVersion = "lightbox 1.1" Object.prototype.log = function(str){try{console.log(str)}catch(e){}} window.log(window.myVersion); window.log("おーーい"); </script>
このコードが IE9 で動きました。IE以外では全部動いてます。![]()
<script type="text/javascript"> Object.prototype.myVersion = "lightbox 1.1" Object.prototype.log = function(str){try{console.log(str)}catch(e){}} window.log(window.myVersion); window.log("おーーい"); </script>
以下には、lightbox.on.coocan.jp/message_cd.htm をIFRAME で埋め込んでいます。 当然このブログはドメインが違うので、本来ならばアクセスできませんが、postMessage の第二引数に "*" を渡す事によって(本来は個別指定)、 どんなドメインへもメッセージ を送る事ができます。 ( 開発者ツールを開いて実行して下さい : IE8 でも動きます ) ただ、送れるメッセージは文字列で一つだけなので、送り出すほうで JSON の文字列を 用意しておいて、こちら側ではそれを eval して利用しています。お互いのドメインの 管理者か同じまたは信頼し合えるならば、この方法で多くのデータを一度にやりとりで きるはずです。 または、IFRAME 側を、埋め込むだけでどこでも使えるような一つの完全なユニットと して設計する為に必要です。
データを受け取る為の定義(get_post_message) ※ 実際は、js ライブラリ化して、script 要素で読み込めば使えるようにします
<script type="text/javascript"> function get_post_message(e) { var prop; var result = eval(e.data); try { if ( console.dir ) { console.dir(result); } else { for( prop in result ) { console.log(prop+":"+result[prop]); } } } catch(e){} } if ( window.addEventListener ) { window.addEventListener('message',get_post_message, false); } else { window.attachEvent('onmessage',get_post_message); } </script> <iframe src="http://lightbox.on.coocan.jp/message_cd.htm" name="myframe" frameborder="1" scrolling="yes" width="300" height="100" ></iframe>
ユニット側
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> <script type="text/javascript"> function t_message() { var value1 = document.getElementById("message1").value; var value2 = document.getElementById("message2").value; var objString = '({ "message1": "'+value1+'", "message2": "'+value2+'" })'; parent.postMessage( objString, "*" ); } </script> </head> <body> <input type="text" id="message1" style='width:200px;' value="日本語表示1" /> <br /> <input type="text" id="message2" style='width:200px;' value="日本語表示2" /> <br /> <input type="button" value="post" onclick='t_message();' /> </body> </html>
必要な時に定義しておくだけで良いですが、これを使って文字列の前を指定した文字列で埋めて固定長の長さの文字列を取りだす事ができます。 10文字以内の前ゼロであれば、 ("0000000000"+x).right(n) ですね。 unicode メソッドは、right を使って \uxxxx という unicode 形式の文字列を作成します。これは、直接使うのでは無く、日本語文字列をキャラクタセットに依存しない文字列にする為の作業用です。
<script type="text/javascript"> String.prototype.right = function(n){ var str = this.valueOf(); str = str.substr(str.length-n,n); return str; } String.prototype.unicode = function() { var str = this.valueOf(); var re = new RegExp("[^A-Za-z0-9_\f\n\r\t\v]","g"); str = str.replace(re,function(s){ var str; str = s.charCodeAt(0).toString(16); str = "0000"+str; str = str.right(4); str = "\u"+str; return(str); }) return str; } </script>
外部より JSON フォーマットのデータを取得した時点では「文字列」ですから、それを JavaScript で使うようにする方法は一般的ですが、そこから「先」は結構多用で一般的では無いような気がします。 そもそも、JSON の a["a2"] は、連想配列のように見えますが、特殊文字で定義されたプロパティを参照する為の書式ですし。 また、eval 使うにあたって、配列はそのままであるとか、for in も結構実際に使うと面倒な構文であったりします。 JavaScript は、自分が知ってる言語の中では、最も難解で不可思議な機能を持ったものだと思っています。
<script type="text/javascript"> function scriptTest(evt) { // JSON 文字列を実体に変える一般的では無い方法 var x = (new Function( 'return {"a1":"Finction","a2":"オブジェクトの","a3":"テスト"}' ))(); alert(x.a1+x.a2+x.a3); // JSON 文字列 var str_json = '{"a1":1,"a2":2,"a3":3}'; // オブジェクト化 var a = eval('(' + str_json + ')'); // プロパティとして参照 alert( a.a2 ); // 特殊文字のプロパティを参照する書式 alert( a["a2"] ); // 配列文字列 var arr_str = '["a1","a2","a3"]'; // 配列化 a = eval(arr_str); // 配列として参照 alert( a[1] ); // 文字列リストに変換 alert( a.join(",") ); // リスト文字列を配列化 a = 'a1,a2,a3'.split(","); // 配列として参照 alert( a[1] ); // 文字列リストに戻す alert( a.join(",") ); // 配列を、JSON 文字列に変換 var str = ""; for( i = 0; i < a.length; i++ ) { if ( i != 0 ) { str += ","; } str += '"'+i+'":"'+a[i] + '"'; } // オブジェクト化 a = eval('({' + str + '})'); // 特殊文字のプロパティを参照 alert( a["1"] ); // オブジェクト内のプロパティの一覧 for( x in a ) { alert( x + ":" +a[x]); } } </script> <input type="button" value="実行" onclick='scriptTest(event);'>
記述の仕方によって違ったように見えやすい仕様ですが、結局は、var x = {} で作成する事のできるオブジェクトの配列の定義を、window の下の任意の名前で定義します。 window["myname"] は、window.myname というプロパティとなり、myname.prop_or_method のような形で定義して行きます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> <title>JavaScript</title> <style> * { font-size:16px; } </style> </head> <body> <script type="text/javascript"> function scriptTest(obj) { createNameSpace("lbox","1.0","lightbox"); lbox.msgbox("こんにちは。", lbox.version, lbox.author, obj.parentNode.innerHTML ); } </script> <div> <input type="button" value="実行" onclick='scriptTest(this);'> </div> <script type="text/javascript"> function createNameSpace(topName,version,author) { if ( !window[topName] ) { window[topName] = {} } window[topName].version = version; window[topName].author = author; window[topName].msgbox = function(){ var i, s="", numargs = arguments.length; for (i = 0; i < numargs; i++) { s += arguments[i] + "\n"; } alert(s + "\n\n" + (new Date()).toLocaleString()); } } </script> </body> </html>
良く使う INPUT 要素のボタン内の onClick イベントのサンプルですが、 他の要素でも同じです。onClick='' のシングルクオート内は、改行が あってもスクリプトなので、(function(){})() という記述で変数もローカル 扱いで処理できます。 但し、'' 内で '' を使う場合は、'' というように書く必要が あります。また、(function(){})() 内に要素自身を渡したい場合は、 (function(obj){})(this) で、obj で参照できます。
<INPUT type="button" value="IFRAME追加" onClick=' (function(){ var str=""; str+="<IFRAME \n"; str+=" src=\"http://winofsql.jp/\" \n"; str+=" name=\"myframe\" \n"; str+=" frameborder=\"no\" \n"; str+=" scrolling=\"no\" \n"; str+=" width=\"590\" \n"; str+=" height=\"800\" \n"; str+="></IFRAME> "; var txt = document.getElementsByName("txt03")[0].value; if ( txt != '' ) { txt = txt + "\n"; } document.getElementsByName("txt03")[0].value = txt + str; })(); ' >
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します![]()
|