- ベストアンサー
iframe内から親ページに文字列追加
サイト内でiframeを使っているのですが、iframe内のファイルを読み込んだとき、もしくはiframe内のリンクをクリックしたときに大元の親ページに文字列（リンク）を追加したいと考えています。 ・階層イメージ （[ ]内は内容） index（親）[iframe（メイン）] ↓ main（メイン） [iframe（子）（子へのリンクがある）] ↓ child（子）[内容] 現在このようになっています。 childを読み込んだときか、mainの子へのリンクをクリックしたときにindexのほうに文字列（リンク）を追加したいのですが、どなたか方法をご存じの方はいらっしゃらないでしょうか？ 当方はあまりHTMLには詳しいとは言えませんので、できれば具体的なタグなどで解説していただければありがたいです。 よろしくお願いします。
- kikitomo
- お礼率42% (6/14)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 window 間や frame 間で情報のやりとりをしたい、という発想は、よくありますね。 幸い、最近 iframe で呼出元（親）に情報を送るコードを書いたところです。 例えば、親から下記 HTML <html> <head> <script language="JavaScript"> <!-- parent.document.form1.data1.value = "Hello"; // --> </script> </head> </html> を iframe に読み込んだとします。 そうすると、親の <form name="form1"> <input type="text" name="data1"> </form> のテキスト入力欄に「Hello」が表示されます。 恐らく、これでご希望のロジックが組めるでしょう。 Javascript や iframe などのキーワードで検索すれば、情報が見付かります。 少々ラフにコードを書きました。適当にゲス（推測）してくれれば幸いです。
その他の回答 (1)
- compequal
- ベストアンサー率42% (61/145)
おっしゃりたいことがわかりにくかったのですが、 つまり、iframe内の内容が、コラムのページから、日記のページになったら、上のほうに表示しておく見出しを「コラム」から「日記」に変更するような、そんなことをやりたい、というイメージで合ってますかね？ で、あれば、実現方法はいくつかあると思います。 1．javascriptを用いる方法（あまり詳しくないので割愛） 2．<a href="xxx.html" target="_top">を用いて、親ページごと新しくしてしまう方法。 という二つになるか、と思います。 1のほうは面倒な手順を踏めば可能だと思いますが、正直そういうことをされている方はお見かけしませんね。ほとんど。 だいたいの場合は、2のような手段になるか、と思います。これだと、iframeを使っているご利益が薄く感じられてしまうとは思いますが。index.htmlのところから変更をしてしまう、という手段ですね。 target="_top" の意味がおわかりにならなかったら、調べてみてください。frameのページは target指定について知っておくことが重要です。
お礼
ご回答ありがとうございます。 ちょっとイメージとは違っている感じです… 変更よりも追加、ストック、履歴に近い感じです。 特定のフィールドに読み込んだものを自動でためておきたいと考えてます。
関連するQ&A
- iframeから別のiframeを自身ページと同時更新 javascript
お世話になります。web初心者です、宜しくお願い致します。 index.html内に２つのiframe main.html・top.htmlがあります。 iframe・main.htmlのlinkをクリックしたとき、自身ページをmain_b.htmlに更新すると同時に、index.html内のtop.htmlをtop_b.htmlへと更新し、さらに更新された時にindex.htmlのページの上部へと移動(main.htmlのlinkがページ下方でmain_b.htmlへ更新されたときに位置が下過ぎてページが見にくい)するにはどのようにしたら良いのでしょうか？ かなり訳が分からずにまいってしまっています、、 どなたか宜しくお願い致します。
- 締切済み
- ネットトラブル
- iframeから別ページのiframeへのリンク
iframeに関する質問です。 iframe内リンク から別ページの iframe 内のアンカーへの移動は可能でしょうか？ ======ページ構成は以下の通りです。====== A_01.html (親ページ) A_02.html (A_01のiframe (子) ページ) B_01.html (親ページ) B_02.html (B_01のiframe (子) ページ) ====================================== ======希望動作====== A_01.html 内に設置してある、iframe A_02.html のリンクをクリックし、 別ページでB_01.html 内に設置してある iframe Ｂ_02.html のアンカー先を 表示したいと思っております。 ==================== 色々と試してはいるのですが上手く行っておりません。 iframeの重複利用は避けたいのですが、色々な制限の為、やもえず使用しております。 何かアドバイスや方法がありましたら宜しくお願い致します。
- 締切済み
- HTML
- 親ページから子ページ内の操作をする iframe
インラインフレームを用いたサンプルを作っています。 親から子へ指示を送ったら、子がそれに応じるというものです。 ローカル環境でエラーを出さずに実現するには postMessageで、どんなコードになりますか？ 【親ページ】parent.html <body style="background:bisque"> <div>parent.html 親ページです.</div> <pre> 【テーマ】親ページから子ページ内の操作をする ＜条件＞ ・ローカル環境 ・親子とも同じ場所 ・親の指示で子が応じる </pre> <iframe id="iframe2" width="500" height="160" src="./child.html"> </iframe> <div>親からの指示内容</div> <div><button onclick="func1()">書き換え１</button> 「囲まれています」を「囲まれました」に書き換える</div> <div><button onclick="func2()">書き換え２</button> 「-----」を「親から伝言あり」に書き換える</div> <script> //子に指示する関数 function func1(){ } function func2(){ } </script> </body> 【子ページ】child.html <body style="background:#eee"> <div>child.html 子ページです.</div> <p> <span id="test">ここは「id属性がtest」のspan要素に囲まれています。</span> <div id="result">output:<span>-----</span></div> </p> <script> //子が応じる関数 </script> </body>
- ベストアンサー
- JavaScript
- リンクをクリックすると、親ウィンドーにiframe構造のページが開き、さらにターゲットへジャンプする方法はありますでしょうか？
例えば、 index.htmlを下記の通りとします。 --iframe----HTML----- | | | | menu | | ---------------------- 左のmenuをクリックすると、iframeで作った別のページが開き、さらにその中のページのターゲット内に移動したいのです。 index.htmlのmenuをクリック→anotherpage.htmlへ移動 --iframe----iframe----- | |main.html | | menu | | ---------------------- さらに、右iframe内はmain.html内のターゲットAへジャンプ。 このようなジャンプは可能でしょうか？ よろしくお願いします。
- 締切済み
- HTML
- リンクをクリックすると親ウィンドーにiframe構造のページが開き、さらにターゲットへジャンプする方法はありますでしょうか？
以前質問させてヒントをいただいたのですが、結局解決できなかったのでもう一度お願いします。 例えば、index.htmlを下記の通りとします。 --iframe----HTML----- | | | | menu | | ---------------------- 左のmenuをクリックすると、iframeで作った別のページが開き、さらにその中のページのターゲット内に移動したいのです。 index.htmlのmenuをクリック→anotherpage.htmlへ移動 --iframe----iframe----- | |main.html | | menu | | ---------------------- さらに、右iframe内はmain.html内のターゲットAへジャンプ。 このようなジャンプがJavaScriptで可能だと教えていただきましたが、どのようにするのか解りませんでした。 そのプログラムや、それ以外の簡単な方法がありましたら、教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- IFRAMEページ表示について
html超初心者で相当ハマッテいます・・・。 _menu__main______ | | |←のようなページをIFRAME | | | を使って作成し、左にmenu/ | | | 右にそのリンク先を表示 | | | させようとしています。 | | | menuボタンをクリックした | | | ときにスクロールバーが -------------- 下りていると、次に表示されたページも同じスクロール位置で表示されてしまいます。 menuボタンをクリックしたとき、ページのトップにリンク先のページも表示させるにはどうしたらいいのでしょうか？ ちなみに <a href="***.html#TOP" target="main">～</a>としてみるとスクロールが一応は上がったのですが、微妙におかしくて・・・。 どなたかご教授いただけませんか？
- ベストアンサー
- HTML
- Iframe内のフォントサイズや文字色を変えることは可能ですか？
iframeであやぽんRSSを用いて他ブログの更新をお知らせしているのですが 青に固定されているリンクの文字色を親ブログと同様茶色にしたいです。 iframe内を親ブログと同じcssに表示することは可能ですか？
- 締切済み
- ブログ
- iframe子ページから親ページへのアクション
iframe内（子ページ）の<input>をクリックすると、 親ページのアクションとして<a href="#wrap">●●●</a>の 「●●●」を押したときと同じアクションをしてほしいのです。。 <input type="submit" onclick="(function(){ window.parent.※※※※※(); }());" /> ↑みたいな感じで実現できるのでしょうか？(T_T)
- ベストアンサー
- HTML
- iframeの中でページ内リンクはできますか？
iframeを使って下記のようなつくりでHTMLを組んでみましたが、Chromeでリンクに飛ぶことができません。（(1)をクリックすると(2)の位置に飛んでほしい） = A.html = <html> <body> <iframe src="B.html" scrolling="no" frameborder="0" width="750" height="2000"></iframe> </body> </html> = B.html = <html> <body> <a href="#CCC"><img src="xxx.jpg" /></a>…(1) ・ ・ ・ <a href="C.html" name="CCC">あいうえお </a>…(2) </body> </html> ざっくりと書いてしまいましたが、親HTML（ここでいうA.html）では指示をせず、あくまでiframe中の子HTML（ここでいうB.html）の中でページ内リンクをしたいと思っています。 ちなみにiframeを使っていますが、ブラウザ上の見え方としては、A.htmlに1ページで組んでいるかのような形にしたいと思っています。 ネットでいろいろ調べてみましたがよくわからず、記述が悪いのか、Chromeではうまくいかないのか、悩んでおります。（Sarfari等、うまくいったブラウザもあるのですが…） よい方法がございましたら教えてください。 宜しくお願いします。
- 締切済み
- HTML
- iframeの中から親ページをスムーズスクロール
タイトルどおり、iframeの中から親ページをスムーズスクロールしたいと考えています。 ヘッダに <script> $(function() { var topBtn = $('#toTop'); topBtn.click(function () { parent.$('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> 親ページには高さ3000ピクセルのiframeを作って、そこに読み込んでいる子ページ最下部に <div id="gotoTop"><a href="#top_page"><img src="_image/btn_top.jpg" alt="トップに戻る" /></a></div> と記述しています。 この状態で親ページをスムーズスクロールさせることができません。 事情があって、親ページ側にはスクリプトやタグを追加することができません。 親も子もおなじドメインにあります。 ["parent" $('body,html') animate]などのキーワードで検索した記事を参考に parent.$('body,html').animate を window.parent.$("body").animate や $('html, body', window.parent.document).animate に書き換えてみてもうまくいきませんでした。 どうかアドバイスをお願いいたします。
- ベストアンサー
- JavaScript
お礼
参考になりました、ありがとうございます。