物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)
【javascript】iframeを使ったインラインフレームで親と子の相互やり取りをしたい + iframeの大きさをユーザーが変えられるようにしたい
2021.02.13 Sat 03:27 | Javascript / d3.js
2021.02.13 Sat 03:27 | Javascript / d3.js
iframeを使ったインラインフレームを初めて使ってみた
使った理由としては、少し長いテーブルがあってそれをうま〜く折りたたみたかったから
html5のテーブルにはそんな機能はないっぽい
調べてみると、frameというのを使うとあるhtmlの中で別のhtmlを開くことができるらしい
それを使って、そのhtmlをテーブルのみにすれば良い
ただし、html5ではframeは廃止されて、iframeに置き換えられる
なのでiframeを使う
■ 過去記事 : インラインフレームに並ぶテキストの位置を指定する
iframeは回り込みとかもできるらしい
要するに、子フレームをページの右端に表示とかもできるっぽい
大きさがページ依存したりする気がするので、きちんと設定する必要がありそう・・・大変
■ iframeの子フレームと親フレームで、javascriptを使った相互やり取りをしたい
■ 過去記事 : iframeの親から子、子から親の操作をする
↑の記事のデモページを見てもらうとわかりやすいかも
javascriptを使うと、ページ内の要素を置き換えたりできる
自分がよく使う例だと、formの値を書き換えたり、ラジオボタンのチェックを別のところに変えたりする
元からあったjavascriptを子フレーム用にするには
documentをparent.documentに置き換えるだけで良さそう
とりあえずそんな修正だけで動いたのでヨシ
関数も使ってるけど、そこは何もいじらなくても動いたなぁ・・・・
■ iframeの右下をドラッグしたら、iframeの大きさを変えられるようにしたい
cssに
と書けばいい
ツイート
使った理由としては、少し長いテーブルがあってそれをうま〜く折りたたみたかったから
html5のテーブルにはそんな機能はないっぽい
調べてみると、frameというのを使うとあるhtmlの中で別のhtmlを開くことができるらしい
それを使って、そのhtmlをテーブルのみにすれば良い
ただし、html5ではframeは廃止されて、iframeに置き換えられる
なのでiframeを使う
■ 過去記事 : インラインフレームに並ぶテキストの位置を指定する
iframeは回り込みとかもできるらしい
要するに、子フレームをページの右端に表示とかもできるっぽい
大きさがページ依存したりする気がするので、きちんと設定する必要がありそう・・・大変
■ iframeの子フレームと親フレームで、javascriptを使った相互やり取りをしたい
■ 過去記事 : iframeの親から子、子から親の操作をする
↑の記事のデモページを見てもらうとわかりやすいかも
javascriptを使うと、ページ内の要素を置き換えたりできる
自分がよく使う例だと、formの値を書き換えたり、ラジオボタンのチェックを別のところに変えたりする
元からあったjavascriptを子フレーム用にするには
documentをparent.documentに置き換えるだけで良さそう
とりあえずそんな修正だけで動いたのでヨシ
関数も使ってるけど、そこは何もいじらなくても動いたなぁ・・・・
■ iframeの右下をドラッグしたら、iframeの大きさを変えられるようにしたい
cssに
iframe{
resize: both;
}
resize: both;
}
と書けばいい
PR
この記事にコメントする
プロフィール
ＨＮ：coffee
職業：物理屋（自称）
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
職業：物理屋
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
カウンター
カテゴリー
ブログ内検索
リンク
相互リンク募集中です
(Twitterにてお知らせください)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
最新記事
(11/20)
(05/09)
(03/05)
(02/29)
(02/21)
(02/21)
(02/21)
(02/21)
(01/13)
(01/05)