bradtosのWEB開発日記

WEB開発エンジニアbradtosによる、JavaScriptやHTML5/CSS3の最新情報などなど・・・



2010-02-23

技術情報:困ったこと IFRAME内のhistoryへのアクセス

02:42

前回紹介したJSOSだが、

やはりクロスブラウザは面倒だなぁと思いながらもちまちま進行中。


とりあえず閉じるボタンと、リサイズ(右下のみ)は実装できてて、

あとはスキン対応なんかを意識してcssと分別化を計ったり。

相変わらずパクりですみません。イカす素材あれば教えてください。

FireFox3でも動くようになりました。

FFの場合、素早いリサイズを試みるとウィンドウが置いてかれるのは謎。


さて今日ぶつかった壁はiframe。

サンプルアプリ第一弾としてiframeによるブラウザもどきを

作ってる途中なんだけど、

今日の困ったちゃんはアドレスバーに必要不可欠な履歴ボタン!

つまり、戻るボタンと進むボタン。


普通に考えれば(window.)history.back()とhistory.forward()しかないので

当然[iframeエレメント.contentWindow.history]からアクセスするつもりだったのだが

当方のIE8だと「アクセスが拒否されました」とでる。

そういえば以前フルJS案件やってたときも悩まされたような・・・

確かにクロスドメインと言えなくもないし、

まあ悪いことをしようと思えばできるだろうってのは想像つくんだけど、

FFなんかだと現状で動いてるし困った。

これだからセキュリティ云々って嫌い。例外処理と同じくらい嫌い。


とりあえずググると2000年ごろはそれで普通に動いてたらしい(笑)

IE8でも動くいい方法ないかな・・・

チョコチョコ 2010/09/08 13:15 もう解決されたかもしれませんが・・・
私も、同じ問題?にぶつかってて javascript側を疑っていたのですが・・・問題はPHPやCGI側にあったみたいです。
PHP、CGI側に
header('Content-type: text/html; charset=utf-8;');
header('Content-type: text/plain; charset=utf-8;');
など、とすると FFでもIEでも同じ結果が帰ってきました〜♪

間違ってたごめんなさい!

bradtosbradtos 2011/01/15 10:57 >>チョコさん
コメントありがとうございます&遅くなりました!
残念ながら、今のところサーバーサイド側では特にプログラムを
動かしていないので、教えていただいたやり方はできないようです(T_T)

nk.nk. 2011/01/15 18:38 HTTPヘッダのcharsetにUTF8指定がないのが問題だとしたら、.htaccessで設定できた気がします。
http://mikeneko.creator.club.ne.jp/~lab/web/htaccess/httpheader.html#Header
firefoxのaddonにある、LiveHTTPHeaderでHTTPヘッダを確認すればUTF8指定がされてるかチェックできますよー。

2009-04-14

IEにおけるjquery.ajax()

17:54

久々にAjaxな画面を書いたらちょっと壁に当ったのでメモ。


当たった壁というのは、タイトルどおりJquery.ajax()を使い

レスポンスにJSONデータを想定した際に

FF3Safari4ChromeはOKなのにIE7、8だと正常に動かない件。

厳密にはerrorで指定したコールバック関数が呼ばれてしまう。

他のブラウザだとsuccessで指定したコールバック関数が動くのに。


ajax()にはオプション引数のうち、dataTypeというパラメーターがあり、

jsonjsonp、textなどを指定できる。

これを指定するとレスポンスに対する解釈をしてくれて

データの扱いが便利になるという代物。

いろいろ試してみたがIE8標準のデバッガ「開発者ツール」には

相変わらずparseerrorの文字が。

つまり、それ以前の問題っぽい。



JqueryにおけるAjaxを解説しているサイトを調べて回ったところ、

結局レスポンスを返すサーバー側が原因と判明。

今回はサーバー側はPHPになっているのだが、

IEJSONデータをレスポンスとして判別させるためには

Content-Typeにapplication/jsonを指定しなければならないらしい。

XMLHttpRequestは本来XML向けだし仕方ないか。

というかJquery側のバグじゃないのか・・・


というわけでPHPのソースに

header('Content-Type: application/json;charset=UTF-8');

を追加したら難なく解決。

2009-03-17

技術情報:JavaScript showModalDialog()

16:50

フォーム付きの画面を作っていて、

テキストボックスだけど手入力不可能にして例外処理を減らしたい場合、

ユーザーに選択肢を与えてそれを選ばせる方法が一般的。


その方法の一つとして、showModalDialog()を使うと

alert()やconfirm()のようなノリで

html(phpやpl、jspももちろんOK)をモーダル表示させることができる。


しかもちゃ〜んと親画面から子画面に引数を渡せるし

confirm()のように子画面で戻り値を設定して親画面から取得することもできる。



実践的で的確な情報が少なかったので自分なりに使う際のまとめを。


●呼び出す側(親画面)では以下のように記述。


returnValue = showModalDialog("<URL>",<子画面に渡す引数>,<表示オプション>)


引数説明

1:URLはいわずもがな。

2:引数はオブジェクトや値を指定できる。

windowオブジェクトを渡せば親画面のJSオブジェクトも全て使えて便利。

3:表示オプションはwindow.open()そっくり。下記msdn参照のこと。


※2,3は省略可能。




●呼ばれる側(子画面)では以下のようになる

親画面の第2引数で渡された値は

window.dialogArgumentsでアクセス可能

(省略した場合はundefinedなので注意)


親画面に戻り値を渡したい場合は画面が閉じられる前に

window.returnValueに値を入れる。

入れなければshowModalDialog()の戻り値はundefinedとなる。


画面を閉じるときは普通にwindow.close()またはclose()で閉じる。

「Xボタン」で閉じられてもwindow.returnValueに値が入っていれば

ちゃんと戻り値が渡されるのでonloadあたりに代入処理を入れておくのもいいかも。



IEでの詳細な仕様は以下から

http://msdn.microsoft.com/ja-jp/library/cc428178.aspx


以前はIEでしか使えなかったけどFFも3になってから対応したみたい。

ブラウザ依存な関数って嫌う人いるけど、

CMSの管理側とか、普通はブラウザIEに限定することが多いので、

そんな場合は進んで使ったほうが幸せになれそう。

これで例外処理との不毛な戦いが少し減らせる予感。