iframe内から親ウィンドウ操作—親要素にアクセスして動的に変更する方法
作成日:2012.01.26
親ウィンドウの要素を動的に変更する方法を紹介します。parentを使った簡単なコードで、iframe内から親ウィンドウの要素にアクセスし、スタイルやコンテンツを変更する方法を解説します。
error この記事は最終更新日から13年以上が経過しています。
いわゆるLightbox風のインターフェイスが流行している影響で、インラインフレーム(に見えないUIだけど)内のウィンドウから、呼び出し元である親ウィンドウの要素を操作する、という処理は多用する機会が増えたなあ、という印象がありますね。
親ウィンドウの要素を操作する時は、
parent.$("#id").addClass('ClassName');
とか、
parent.$("p").html('カラオケ行きたい。');
とか、まあ普通の JavaScript と同じように parent で親ウィンドウを指定すればOKです。
チェックボックス操作のためのjQuery基本メモ
2025.02.05
jQueryを使ってチェックボックスの状態を操作するための基本的なコードをまとめています。フォームやインタラクティブなUIを作成する際に役立つ内容です。
jQueryでフォームのreadonly属性を操作する方法
2025.02.04
jQueryを使ってフォーム要素のreadonly属性を動的に操作する方法について解説します。readonlyの設定と解除の手順をシンプルにまとめました。
ダッシュボードのパフォーマンス改善:Ajaxとiframeの実践例
2024.12.11
サーバーサイドですべてを処理してから画面を出力するのではなく、データを分割して効率的に表示する手法をご紹介。Ajaxとiframe、それぞれの特徴や実装例をわかりやすく解説します。
contenteditableで作るインライン編集システムとデータ送信の仕組み
2024.12.03
contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。