Home / Diary / タグ: javascript
っぽいことをする。
XMLHttpRequestがダメなだけで、iframeを使ってテキスト取得とかは可能。俗に言うIFRAMEHTTPRequest。もしくはHTTP.Push？
var iframe = document.createElement( "iframe" );
iframe.src = <ローカルファイル>;
iframe.onload = function( ) {
//読み込み完了時の動作
}
document.body.appendChild( iframe );
最小構成だとこなかじ。当然のことながら呼び出すコンテンツは同じドメインのものでないと、内部にアクセスした途端にエラーが返ってくる。
んで、XMLHttpRequestではないので色々と制限を受ける。
HTMLを読み込んだ時は、画像やらスクリプトやら諸々全てが完全に読み込まれてから初めてonloadが発生したり、POSTで取得できなかったり。（がんばればできるという話を聞いたが）
textやscriptを読むときは注意が必要。内部でpre要素に入れられつつ、[<>"&]が文字参照に変換されてしまっているので元に戻す必要がある。
var doc = <iframeオブジェクト>.contentWindow.document;
if( doc.doctype == null ) { //nullだとhtmlではない・・・らしい
alert( doc.body.innerHTML
.replace( /^<pre>|<\/pre>$/i, "" )
.replace( /"/g, "\"" )
.replace( /</g, "<" )
.replace( />/g, ">" )
.replace( /&/g, "&" )
);
}
else {
alert( doc.body.innerHTML );
}
外部のコンテンツはとりあえず取得できる。が、したらしたで今度は貧弱なDSの側で色々しなきゃいかん場合もあるので、ある程度はサーバーサイドと相談するのがいいかもしれん。
補足。試しにGoogleのHTMLソースを取得してalertさせたら、画面暗転してから（この時点で既に読み込みは完了してる）ソース表示まで10秒近くかかった。・・・そこまで負荷がかかるのか。（というか描画全般に弱いのかな？）
Info
- 投稿日
- 2006年8月1日
- タグ
- game、javascript、opera
- このエントリの固定リンク
- http://diary/log/1421.html
- ブックマークに追加する
-
- コメント
2006
0801
Tagsgamejavascriptopera
劣化してるけど。
js-markdown-extra
js-markdownというものは以前から存在していたけど、やっぱり定義リストやテーブルも使えるといいよねー。
そこで、正規表現の勉強も兼ねてPHP Markdown Extraを移植してみようじゃあないか、と思って作ってみたのがこれ。PerlとJavaScriptの正規表現は全然違うので移植に苦労したが、ある程度までなら再現してくれるだろう。たぶん。
使い道だが・・・ブログやwiki投稿前のリアルタイムプレビューに使ったりとかかな？ 俺は愛用しているテキストエディタの「Alpha」に組み込んで、ショートカットキー一発でHTMLに変換するようにしてる。ちょっとしたHTMLを書きたいときとか超便利。
JavaScriptの正規表現の限界+勉強不足のせいで不具合がそこそこあり、複雑な構文を変換しようとすると固まる可能性があるので、利用の際は注意して欲しい。ローカルでの利用を激しく推奨。
Info
- 投稿日
- 2006年7月8日
- タグ
- javascript
- このエントリの固定リンク
- http://diary/log/1411.html
- ブックマークに追加する
-
- コメント
2006
0708
Tagsjavascript
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。
-
前々回、前回同様いい加減な部分もあるので、鵜呑みにしないように。
Changelog
- …
- Added support for DOM level 2 Style Sheets and associated parts of DOM level 2 CSS. (Yay!!)
Friday once more! - Opera Desktop Team
DOM2CSSが遂に！
早速インストールして色々試してみたけど、基本はFirefoxと一緒でIEの良いとこ取りになってる。コードの書き換えはほとんど必要なし。ありがとう、おぺらたん！
スタイルシートルールの追加と無効
基本的な方法は前々回と一緒。3ブラウザ共通。
スタイルシートルールの取得
基本的な使い方は前々回と一緒。
Operaの場合、返ってくる値の自動補完は無効。つまりIEと一緒で、実際に記述したプロパティの値しか返ってこないっぽい。
div.hoge { background : #668 }
getStyleValue( "div.hoge", "background" );
//IE : #668
//Firefox : rgb(136, 102, 102) none repeat scroll 0% 0%
//Opera : #668
要素に適用されているスタイルを取得する
ここでちょいと前々回の修正。
FirefoxはgetComputedStyleを利用して取得するが、この場合得られる値は何が何でもpx換算されてしまう。
仮にemで指定した場合、ブラウザのフォント設定によって結果が変わってしまう。ブラウザ側で18pxと設定してCSSに1emと記述した場合、1em=1文字の大きさ=設定された18pxとなり、18pxが返ってくる。
ブラウザ側でCtrl++でフォントを大きくした場合でもしっかり対応してくれるので、使いようによっては便利かもしれない。上記の例なら、2回フォントを大きくしてから取得すれば、しっかり50%増しの27pxが返ってくる。試していないが、モニタ解像度を96dpiから72dpiに変えたりすれば、pt指定の値も変化するものと思われる。
なお、OperaはgetComputedStyleでもcurrentStyleでも両方イケるので、記述した値をまんま取得したいならcurrentStyleで取得するべきだ。
getComputedStyleで取得する場合、OperaはFirefoxと違ってブラウザ側のフォントサイズ変更には追従してくれないので注意。300%まで拡大してもデフォルトサイズが返ってくる。
それと、OperaのgetPropertyValueはFirefoxと違い、一括指定したプロパティでもIE同様に取得することができる。
#hoge { margin : 1em }
getActiveStyle( $( "hoge" ), "margin" );
//IE : 1em
//Firefox : null
//Opera(currentStyle) : 1em
//Opera(getPropertyValue) : 16px
軽くまとめる
- IE
- － セレクタ毎に分割登録される
- × 擬似要素（:visited等）が取得できない
- × 全称セレクタが削除されて登録される
- Firefox
- － セレクタ毎に分割登録されない
- ○ ブラウザに忠実なpxサイズ取得
- △ プロパティの自動補完
- × 一括指定セレクタで取得できない
- Opera
- － セレクタ毎に分割登録されない
- ○ IE/Firefox両方の方法で取得できる
雑感
Operaがいい感じに仕上がってきたので、ボチボチ使い始めてる。
デフォルトでも最低限の機能が揃ってるOperaをライトユーザーに。拡張をブヂュルブヂュル入れてパワーアップ！ スワップしてくれるぜー！ というコアユーザーはFirefox、という風に住み分けてもいいんじゃないかと思えるようになってきた。
描画周りが速いOperaをwebアプリケーション専用ランチャーにでもしようかなーとか思ってたり。メーラーとして使ってもいいだろうし。
そういやOperaは各種携帯端末だけじゃなく、DSでも使える上にwii標準搭載らしい。実にいいね。
InternetExplorer？ dataスキーム未実装でスクリプト処理速度が亀でAcid2が血の海でまともにCSSが使えないブラウザなんて存在しませんよ。ファンタジーやメルヘンじゃあるまいし。
Info
- 投稿日
- 2006年6月14日
- タグ
- css、javascript
- このエントリの固定リンク
- http://diary/log/1393.html
- ブックマークに追加する
-
- コメント
2006
0614
Tagscssjavascript
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。
-
前回同様、結構適当に書いてる部分もあるので鵜呑みにしないように。
IEとMozillaでは、スタイルシートの値を取得するには以下の処理を利用すればよい。
function getStyleValue( selector, property ) {
property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
var stylesheets = document.styleSheets[0].rules //IE
|| document.styleSheets[0].cssRules; //Mozilla
for( var i = 0, len = stylesheets.length; i < len; i++ ) {
var css = stylesheets[i];
if( css.selectorText.toLowerCase( ) == selector.toLowerCase( ) ) {
if( css.style[ property ] ) return css.style[ property ];
}
}
return null;
}
しかし・・・
全称セレクタ
IEにはほとんどの場面で取得出来なくなる仕様が存在する。
ul * { line-height : 150% }
このようにスタイルシートに記述していた場合
getStyleValue( "ul *", "line-height" );
このようにしてもIEでは取得できない。どうやら内部でアスタリスクが消されるようで、document.styleSheets[0].rulesを参照しても、上記の場合はselectorTextがulのみになってしまう。
じゃあアスタリスクを除いたulだけ指定して取得すればいいじゃん、と思うが
ul { margin : 1em }
ul * { margin : 0.5em }
もし、このように指定されていたら、forループ中に先に指定したulがひっかかってしまい、本来取得したいul要素の子要素全てのmarginは取得できなくなってしまう。
ブラウザの差異を無くすために以下のように記述することがある。
* {
margin : 0;
padding : 0;
font-size : 100%;
font-weight : normal;
font-style : normal;
line-height : 100%;
list-style-type : none;
}
この場合は以下のようにすることで取得することができる。
getStyleValue( "", "line-height" );
ちなみに
ul * span { line-height : 150% }
これを取得する場合は以下のようにする。
getStyleValue( "ul span", "line-height" );
スペースを二つ空けるのがポイント。一つではダメ。
これらは全てIEのみで、mozillaは関係ない。
グループ化
ul li, span { line-height : 150% }
カンマで区切ってグループ化する場合、IEでは内部で分解される。
getStyleValue( "ul li", "line-height" );
getStyleValue( "span", "line-height" );
上記で両方とも取得できる。が、「ul li, span」では取得できない。
逆にmozillaは内部で分解されないので
getStyleValue( "ul li, span", "line-height" );
と指定する必要がある。ややこしい。
まとめ
JavaScriptでCSSを弄るつもりなら、全称セレクタは使うな。グループ化は避けろ。
そこでプロパティ別整理法をプッシュしてみる。
全てとは言わず、デザイン段階での変更頻度が高い「margin、padding、color、background、border」あたりだけでもやっておくと結構楽。ただし、CSSのサイズが小さい場合は逆効果。
どうでもいいこと
getStyleValueを、同じセレクタで複数スタイルを指定していても（たぶん）大丈夫なように変更。
愚痴
OperaはWidgets実装して浮かれてる暇があったらさっさとDOM2 CSSをサポートしやがれ。ってゆーかサポートしてくださいお願いしますおぺらたん。
愚痴 その2
IE7はタブ+RSS実装して浮かれてる暇があったらさっさとdataスキームを実装しやがれ。
Info
- 投稿日
- 2006年5月13日
- タグ
- css、javascript
- このエントリの固定リンク
- http://diary/log/1381.html
- ブックマークに追加する
-
- コメント
2006
0513
Tagscssjavascript
Ajaxにおけるメモリリークの注意点
最近作ってるやつは、Firefox+IETabで動作確認しながら作業してるわけだが、なんか動作重いっつーかスワップしまくってねーか？ と思ってタスクマネージャー開いたらメモリを300MB食っててえらいビビッた。これだったのか。
今確認したら一回リロードする度に10MB増えてた。10MBて。
Info
- 投稿日
- 2006年3月24日
- タグ
- javascript
- このエントリの固定リンク
- http://diary/log/1350.html
- ブックマークに追加する
-
- コメント
2006
0324
Tagsjavascript
このエントリは、JavaScriptによるCSSの操作として新たに書き直しました。
-
俺の探し方が悪いんだろうが、JavaScriptでCSSを弄るリファレンスが中々見当たらなかったので、メモも兼ねて書く。
結構適当に書いてる部分もあるので鵜呑みにしないように。あと、Operaは知らね。
スタイルシートのルールを弄る
div内の全要素をgetElementsByTagNameで拾ってforで回してstyleに・・・ってなことをやるよりも、スタイルシート側から操作できるようになれば楽になる。
function addRule( selector, property ) {
if( document.styleSheets[0].addRule ) //IE
document.styleSheets[0].addRule( selector, "{" + property + "}" );
else if( document.styleSheets[0].insertRule ) //Mozilla
document.styleSheets[0].insertRule( selector + "{" + property + "}", document.styleSheets[0].cssRules.length );
else
return false;
}
addRule及びinsertRuleはルールの先頭に追加していく。ルールは基本的に対象が同じなら後から指定したものが有効になるので、どんどん追加していって構わない。
addRule( "div ul.hoge", "display : none" );
これでdiv以下のhogeクラスが指定されてるリスト要素にdisplay:noneを適用して表示しないようにすることができる。
addRule( "div ul.hoge", "display : block" );
あとから追加したものが有効になるので、こうすれば元に戻る。
スタイルシートのルールを取得する
設定できたなら、取得したい時もある。
function getStyleValue( selector, property ) {
property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
var stylesheets = document.styleSheets[0].rules //IE
|| document.styleSheets[0].cssRules; //Mozilla
for( var i = 0, len = stylesheets.length; i < len; i++ ) {
var css = stylesheets[i];
if( css.selectorText.toLowerCase( ) == selector.toLowerCase( ) )
return css.style[ property ];
}
}
こうすることで、現在適用されているルールの値を直接取得することができる。
IEの場合、直接指定されたもののみ取得できるが、Mozillaの場合は、指定していないものはデフォルトの値が入って返ってくる
getStyleValue( "div.hoge", "background" )
IE : #668
Mozilla : rgb(136, 102, 102) none repeat scroll 0% 0%
MozillaはRGBの値が自動的に変換されるのにも気を付ける。
camelizeはハイフン＋小文字アルファベットを大文字アルファベットに直す関数。deCamelizeはその逆。
String.prototype.camelize = function( ) {
return this.replace( /-([a-z])/g,
function( $0, $1 ) { return $1.toUpperCase( ) } );
}
String.prototype.deCamelize = function( ) {
return this.replace( /[A-Z]/g,
function( $0 ) { return "-" + $0.toLowerCase( ) } );
}
こげな感じに宣言しておく。
どうでもいいが、camelizeの逆の動作はdeCamelizeでいいんだろうか？ 英語っつーかそこらへんの命名規則に全然詳しくないからわからん。
スタイルシートを無効にする
document.styleSheets[0].disabled = true
これだけ。インライン指定したものは有効なままなので注意。
要素に適用されているスタイルを取得する
div#hoge { margin-top : 10px }
このようにスタイルシートに記述して、該当要素を取得してstyle.marginTopの値を見ても中身は空である。インラインレベル、つまり今現在適用されているスタイルを取得したい場合は以下のようにする。
function getActiveStyle( element, property, pseudo ) {
if( element.currentStyle ) { //IE
property = ( property.match( /-/ ) ) ? property.camelize( ) : property;
return element.currentStyle[ property.camelize( ) ];
}
else if( document.defaultView.getComputedStyle ) { //Mozilla
property = ( property.match( /-/ ) == null ) ? property.deCamelize( ) : property;
return document.defaultView.getComputedStyle( element, pseudo ).getPropertyValue( property );
}
return "";
}
getActiveStyle( $( "hoge" ), "marginTop" );
getActiveStyle( $( "hoge" ), "margin-top" );
getActiveStyle( $( "hoge" ), "margin-top", ":first-line" );
こんな感じで使う。
getComputedStyleについて
getComputedStyleの第二引数は擬似要素・セレクタを取得したいときに使う。:first-lineとか:visitedとか。
IEの場合は擬似要素・セレクタの取得が不可能っぽい。currentStyle周辺を掘ってみてもそれっぽいものは見当たらなかった。
getPropertyValueについて
div { margin : 20px }
と指定してgetPropertyValueからmarginで取得しても空の文字列が返ってくる。どうやら一括指定のプロパティは指定できないようになっているらしい。
margin :
marginTop : 20px
marginRight : 20px
marginBottom : 20px
marginLeft : 20px
この場合だとこのようになってしまっているので、1方向ずつ取得しなければならない。IEのcurrentStyleならmargin指定でも問題なし。
続く
Info
- 投稿日
- 2006年3月14日
- タグ
- css、javascript
- このエントリの固定リンク
- http://diary/log/1342.html
- ブックマークに追加する
-
- コメント
2006
0314
Tagscssjavascript
