jQueryを使い、iframeのsrcを動的に書き換えようとしてハマった話

jQuery

まずは、以下のHTMLを見てください。

jQueryを使い、「A」が押されたら動的にiframeのsrcが変わるようしていきたいと思うのですが・・・

ここで、はまりました。

次に、はまったjsコードを見てください。

ここでしていることは、

例えば、

  1. 「B」がクリックされたら(3行目)
  2. 「B」のdata-idを取得し(4,5行目)
  3. そのdata-idを元に
  4. hogeディレクトリの中にあるhoge2-1(data-id).htmlをiframeに入れる(6行目)

ということをしています。

しかし、このままでは、
aタグのhref属性が効いてしまい、
せっかくiframeのsrc属性を変更しても、
また元に戻ってしまいます。(上記jsコード6行目)

そこで、以下のように変更!

aタグのクリックイベントをpreventDefault();でキャンセルしました。
それ以降の処理が完了しても、aタグのhref属性は効かないので、うまくいきます!

他にpreventDefault();return false;にするやり方がありますが、

return false;以降の処理が走らないので、気をつけましょう!と自分の言い聞かせる・・・
これに関しては、以下の記事が参考になります。

ここに至るまで1日かかりました・・・。

スポンサーリンク
jQuery

当ブログはエックスサーバーを使用しています

僕が『エックスサーバー』を使う理由は、高速で、高い安定性を誇っているからです。

また、月額900円から利用できるので、ブログ初心者の僕にとって、経済的にみてありがたい。

無料お試し期間が10日間あるので、

  • ブログを始めたい
  • 自分のサイトを作りたい
  • プログラミングでもっとステップアップしたい

という方は、1度試してみるといいと思います。