- ベストアンサー
iframeの内容で変化させる
index.html内にiframeを設置しています。 iframeに表示されているURLを取得してindex.html内にある見出しのテキストを変化させたいです。 <例> index.htmlの<h1>見出し</h1>←この部分を変化させる iframe内がphoto.htmlの場合<h1>写真集</h1> diary.htmlなら<h1>日記</h1> ご教授願います。
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
サンプルです。 URLで判定して、っていうのも面倒そうだったんで 読み込んだiframe内のタイトル（<title>～</title>）を h1に入れてます。 （どうしてもURLで判定したければ title を location.hrefにしてアレンジしてみて。） ※Javascriptの制約上、iframe内に読み込むファイルが別ドメインだとエラーになります。 <html> <head> <title></title> <script type="text/javascript"> function h1replace(iFrame){ var h1 = document.getElementsByTagName('h1')[0]; if(iFrame.contentWindow) { h1.innerHTML = iFrame.contentWindow.document.title; } else { h1.innerHTML = document.frames[iFrame.id].document.title; } } </script> </head> <body> <h1>最初のタイトル</h1> <p><iframe src="～" onload="h1replace(this)" id="IF01"></iframe></p> </body> </html>
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 参考までに・・・以下の制約付ですがiframe内のページからの操作もできます iframeで表示するページはiframeだけで表示するのでしょうか？（target="top"などiframe以外で表示することがあるのでしょうか？） 【理由】親ページを表すparentを使う為エラーになる（index.htmlからのopen.windowはO.K.です） 別のページのiframeで表示することはあるのでしょか？ 【理由】<h1></h1>がないとエラーになる 【index.html】 <h1></h1> <iframe src="" name="inline"></iframe> <p> iframeへどのように表示させるのか分からなかったのでリンクにしています <a href="photo.html" target="inline">photo</a> <a href="diary.html" target="inline">diary</a> </p> 【photo.html】 <script language="javascript"><!-- window.onload=function() { parent.document.getElementsByTagName("h1")[0].innerHTML = "写真集"; } //--></script> 【diary.html】 <script language="javascript"><!-- window.onload=function() { parent.document.getElementsByTagName("h1")[0].innerHTML = "日記"; } //--></script>
<html> <head> <title>h1.onchange</title> <script type="text/javascript"> url={ "photo.html":"写真集", "diary.html":"日記", "url.html":"URL" } window.onload = function(){ var iframe = frames[0]; var fn = iframe.location.href.split('/')[iframe.location.href.split('/').length-1]; document.getElementsByTagName('h1')[0].innerHTML = url[fn]; } </script> </head> <body> <h1>aaa</h1> <iframe src="url.html"></iframe> </body> </html>
原理だけ javascriptで書き出す予定のiframeのsrcによって見出し部分の書き出し内容もjavascriptで書き出す iframeをランダムに、は 同じ質問が何回か出てるから探してみて。
お礼
自分の条件では、steel_grayさんのアドバイスが最適な結果となりました。 有り難うございます。