はてなブックマーク

Javascriptにおいて、一定時間後または一定時間ごとに関数を実行するには、 window.setInterval("呼び出す関数","待機時間"); window.setTimeout("呼び出す関数","時間間隔"); とする。 しかし、このsetIntervalとsetTimeout、呼び出す関数に引数を渡すときにちょっとめんどくさい。 というのも、 var timer; function func1(){ timer=window.setTimeout("func2('"+"こんにちは"+"')",1000); } function func2(str){ window.alert(str); } などとしなければならない。 var timer; function func1(){ var message = "こんにちは"; timer = window.setTimeout

Javascriptをコーディングしていて、IEだけ意図した動作を示さないということはあまりに数多く遭遇するトラブルの一つである。 特にIE9以前のバージョンではそれが顕著であり、そのことに頭を悩ませるのにはもはや慣れたという人も多くいる筈である。この投稿では、IE8で遭遇した不思議な現象についてである。 img要素にonloadイベントをくっつけると画像のロード完了時に関数を実行する事ができるのだが、IE8ではimg要素の画像がキャッシュからロードされるとき、onloadイベントが実行されない。 1. キャッシュから読み込んだ時にonloadイベントが動作しないコード var img = document.createElement("img"); img.src = "画像のパス"; img.onload = function(){alert("読み込んだよ！")}; parentEl

ウェブページを作成していて、推奨されないタグとされていても未だにiframeを用いるときもある。 特定のページがiframeとして埋め込まれたときに、そのページの要素を削除・追加したい。 iframeで埋め込まれることを前提としたページをブラウザから直接閲覧してほしくない。 といった場合、iframeとして埋め込まれるページの側で「iframeで埋めこまれているのか否か」を判断する必要がある。 方法はいたってシンプル。 Bodyのonloadなどで、 if(window!=parent){ //iframeで埋めこまれた場合の処理 } else if (window==parent){ //通常表示された場合の処理 } を実行すればいい。 シンプルだが、各種ブラウザでの動作も確認済み。

CSSでクラスを指定してそれらのデザインをごそっといじるという場面はよくある。 そのデザインを特定のイベントで変更したりするとき、クラス名でElementを取得するのに getElementsByClassName("クラス名") というものがある。 ところがこれはFirefox 3ではサポートされているがIEではUndefinedで返ってくる。 でも使いたいなーって時があったのでその時作ったクラスの覚え書き。 目的である「クラス名からエレメントを取得する」という動作を実現するには… 全要素を取得して一つ一つクラス名を検索対象のクラス名と比較する。 クラス名が一致すれば配列に突っ込む。 全て終わったら出来上がった配列を返す。 という3ステップでできそう。 ならば… function getElementsByClassName(targetClass){ var foundElements

シークバーでページを切り替える仕組みを作っていて壁にぶち当たりました。シークバーのボタンを画像にしていたんですが、ボタンをドラッグするとブラウザの画像をドラッグすると起きるイベントのほうが優先されてしまい、狙った動作が起こせませんでした。対応策としては、 透明な要素でボタン全体をカバーしてブラウザの画像ドラッグイベントをさける Javascript側で対処する という2点を思いつきました。シークバーの仕組み自体をJavascriptで作成しているので当然後者がスマートだと思い、方法を探ってみた結果です。 画像部分がうまくドラッグできないサンプルのリンクはこちら→ http://t87r.web.fc2.com/Wordpress/Drag/sample.html#ex2 このサンプルはドラッグで動かしたい要素「div2」にwindowのonloadで以下の関数を実行します。div2にはCS