ここから本文です

解決済みの質問

JavaScriptを使用してインラインフレーム(iframe)内のコンテンツを切り替えたいの...

ritugogoさん

JavaScriptを使用してインラインフレーム(iframe)内のコンテンツを切り替えたいのですが
どのように記述すればいいのでしょうか？
getElementByIDやSetAttributeなどを使うのでしょうか？

イメージはボタンをいくつか用意して、ボタンの押下でインラインフレーム内のコンテンツを
test1.html→test2.htmlのようにファイル単位で変更する感じです。

違反報告

ベストアンサーに選ばれた回答

haranyi23416425さん

<html>
<head>
<script language="JavaScript">
function changeFramePage(pageUrl){
frames[0].location.href = pageUrl;
}
</script>
</head>
<body>

<iframe name="sampleF" src="■■.html"></iframe>
<input type="button" onClick="changeFramePage('test1.html');" value="test1">
<input type="button" onClick="changeFramePage('test2.html');" value="test2">

</body>
</html>

注文どおりにサンプルを作ってみました。解説します。
ページを切り替えるためには フレーム.location.href = ページ名 か フレーム.src = ページ名 などが考えられる手段ですが、この場合は前者のほうがよさそうですね。SetAttributeは使用方法が少し難しいので避けます。

次に、どうやってフレームの場所を表現するかですが・・・
getElementByIdはlocation.hrefと相性が悪いようです。なので、インラインフレームはframeオブジェクトとして扱います。
このページの中でフレームは1つしかないので、0番目のフレーム つまりframes[0]と表現できます。
よってページを変える方法は
frames[0].location.href = ページURL
となります。

ちなみに、ボタンを押すとイベントが発生するようにしてありますが、イベントの内容を関数にしないで
frames[0].location.href = ページURL
のように直接書いちゃってもいいのではないか？という疑問が浮かびますが、どうやら相性はよくないようです。
できなくもないので作るボタンが少なければ直接書いたほうがすっきりとしたプログラムになります。
多かったり、インラインフレームが多かったりすると逆効果なので、関数にしてしまったほうがいいでしょう。

質問した人からのコメント

  • ありがとうございます。以下のようにして解決できました。scriptタグはなくても大丈夫なようです。

    <button onclick="window.frames.iframe1.location.href = 'test2.html';">iframe1
    にpage1.htmlをロード</button>
    <hr />
    <iframe src="test1.html" name="iframe1" width="200" height="150"></iframe>
  • コメント日時：2008/6/21 23:04:48

アバター

この質問・回答は役に立ちましたか？
はい
いいえ

お役立ち度：お役立ち度　5点（5点満点中）1人中 1人が役に立つと評価しています。

ベストアンサー以外の回答

（1件中1～1件）

 

yi01_imaginationさん

>getElementByIDやSetAttributeなどを使うのでしょうか？
getElementByIDの使い方（iframeエレメントのとり方）がわかるということを前提にいうと、簡単で、

document.getElementById("iframeのID").contentWindow.location.href="test2.html";

でいけると思います。contentWindowはインラインフレーム内のウインドウオブジェクトをさしています。

あなたにおすすめの解決済みの質問

インラインフレーム　横スクロールに関して ＨＰを作成しています インラインフレームを使った際に <IFRAME SRC="test.php" height="190" width="290" marginwidth="0" marginheight="0" align="left"> インラインフレーム非対応...
フレームやインラインフレームやflashを使わない方法でサイトのメニューバー(コンテンツのリンク先)を一つのファイルを変更すると全てのページに適用される方法はありませんか？
Lightboxで表示させる画像を、iframe外まで表示させたいのですが、それは可能でしょうか？ 私のサイトはインラインフレームを使用していて、フレーム外のメニューをクリックすると、インラインフレーム内のページが切り替わりま...