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-06-23

技術情報:困ったこと jQueryによるラジオボタンの値取得

02:24

なんか最近困ったことばかりのような。

さてjQueryといえば近年のJSライブラリの定番で、

Aptanaにも標準搭載、.jsファイルはおろか

コードアシスト用のドキュメントも内蔵されているという徹底ぶり。


だが・・・個人的にはあまり好きではない。

理由は単純、$()というのはdocument.getElementById()のエイリアス

あるべきだと思うからだ。

というのもprototypeもまだまだ根強い人気があるなか、エイリアス名が

かぶるというのはコーディングする上で非常に厄介な問題であるし、

prototypeのほうが先に流行ったからだ。

もし複数名のJSエンジニアが集まれば喧嘩になること間違いなし。

というのはおいておいて、単にjQuery("CSSセレクタ")というのが気に食わないだけだったり。


なので、自前のユーティリティ群には

//jQueryをj$でアクセスできるように
var j$;
if(typeof jQuery === "function"){
	j$ = jQuery;
}
else{
	delete j$;
}


なんて書いている。



さて本題だが、多くのJSエンジニアがぶつかるであろう

ラジオボタンの値取得について。

通常ラジオボタンといえば、同じnameでvalueが違うものを

複数個配置することが多いと思うが、

document.formsから辿ろうとするとテキストボックスなどと違い

ラジオボタンに指定したname属性は配列になっている。


たとえば以下のラジオボタンがあるとする。


<form name="form1">
<input type="radio" name="rbtest" value="0" />0
<input type="radio" name="rbtest" value="1" checked="checked"/>1
</form>


するとdocument.forms["form1"]["rbtest"].lengthは2となり、

document.forms["form1"]["rbtest"][0]と

document.forms["form1"]["rbtest"][1]をループなりして

checked属性の値をいちいち見なければならない。

なんとも不親切な仕様である。


そこで簡単に取得する方法があったはずだと思い

googleで検索したところ、どうやらjQueryを使えば簡単に取得できるらしい。

使い方は簡単。


jQuery("input:radio[@name=rbtest]:checked").val()


とすることにより取得できるらしいのだ。

しかし、早速問題が発生。

確かに画面を表示したときやinnerHTMLを操作した直後の値が取れることは確認できたが、

マウスで別の値をクリックした後に上記のコードを実行しても

値が変わっていないことがあるようなのだ。


はじめは自分の書いたコードのバグかとも思ったが、

もしかしたらブラウザバグなのだろうか。

現象はIE8で発生しているので、何か情報をお持ちの方は

是非教えていただきたい。

tavitavi 2011/05/25 17:03 もはや、かなり前の記事なので、意味あるか分かりませんけど、
jQuery("input:radio[@name=rbtest]:checked").val()
の、"@"を除いたら期待通りの操作をしてくれると思います。

bradtosbradtos 2011/05/26 00:10 なんとそれでイケるんですか?
ありがとうございます、ちょっとやってみます!

2009-04-14

IEにおけるjquery.ajax()

17:54

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


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

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

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

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

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


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

json、jsonp、textなどを指定できる。

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

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

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

相変わらずparseerrorの文字が。

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



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

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

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

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

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

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

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


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

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

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

2009-04-01

技術情報:IE8セッションその後

10:01

先日IE8の正式版が出たので試してみた。

結果、BETAやRC1にあったセッションの不具合はなくなっていた。

ちゃんと今までどおり引き継がれることを確認。

さらに、前回の記事には書かなかったけど、

「window.open()時にイベントが発生したウィンドウの裏側にウィンドウが表示される」

問題も解決していた。地味に嫌なバグだったのでよかったよかった。


どんなリリースもある程度テストしているんだろうけど、

こういう分かりやすい(再現しやすい)ところでバグを残したまま

ってのが面白いなと思った。

日ごろプログラム書いてて思うけど、

やっぱり完璧にテストするのは不可能だね。リソースの問題然り。


MSの製品は確かにバグが多いけど、

ちゃんと(しかも無料)でフィードバックするあたりが偉いと思う。

2009-03-13

技術情報:困ったこと IE8のセッション管理

19:10

現場でIE8 RC1を使っているんだけど、

window.open()で開いた画面が別セッションになってしまう。


検索したらこんなの出てきた

http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/3c65fcfe-43ed-4ea5-8cf5-8adb50ddc508/


普通に考えて、既存のページでも困ることたくさんあるよね?


困る例:mixi

mixi内で画像をクリックすると別ウィンドウで拡大画像が表示されるんだけど、

「ログインを記憶しない」状態の場合

拡大画像ではなくログイン画面になってしまう。

普通に考えておかしいっしょ。。

もしIE8の仕様ならこれからWEBアプリ作るの大変になりそうw

てか少し前に作ったやつがセッション使ってるので困ってます。

ログインという仕組みもないし。