第83回 「インラインフレームのURLを変更する」
今回はインラインフレームのURLを変更する方法について説明します。
インラインフレームもフレームの一種ですが、ページ内に埋め込まれる形になるためアクセス方法がブラウザによって異なります。まず、Internet Explorerの場合から説明します。
Internet Explorerではインラインフレームのタグ<iframe>のname属性で名前を指定するかid属性で指定を行います。ここで指定した名前を使ってインラインフレームにアクセスする事ができます。
例えばcFrameという名前をインラインフレームに付けるには以下のようにします。
<html>
<head>
<title>Sample</title>
</head>
<body>
<iframe src="page1.html" name="cFrame"></iframe>
</body>
</html>
このインラインフレームのURLを変更するには以下の書式になります。
インラインフレーム名.location.href = 変更するURL
または
document.インラインフレーム名.location.href = 変更するURL
実際のプログラムは以下のようになります。フォームのボタンを押すとインラインフレームのURLがpage2.htmlになります。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function newURL()
{
document.cFrame.location.href = "page2.html";
}
// --></script>
</head>
<body>
<form>
<input type="button" value="ページ２に変更" onClick="newURL()"
</form>
<iframe src="page1.html" name="cFrame"></iframe>
</body>
</html>
Internet Explorerの場合は上記の方法でインラインフレームにアクセスすることができますが、Netscape NavigatorやSafariなど他のブラウザでは正しく動作しません。これらのブラウザではインラインフレームのタグ<iframe>のid属性でIDを付けておきgetElementByIdを使ってアクセスします。
これらのブラウザでインラインフレームのURLを変更するには以下の書式になります。
document.getElementById(インラインフレーム名).src = 変更するURL
実際のプログラムは以下のようになります。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function newURL()
{
document.getElementById("cFrame").src = "page2.html";
}
// --></script>
</head>
<body>
<form>
<input type="button" value="ページ２に変更" onClick="newURL()"
</form>
<iframe src="page1.html" id="cFrame"></iframe>
</body>
</html>
このプログラムはInternte ExplorerでもNetscapeでもSafariでも動作します。インラインフレームを操作する場合には、このgetElementByIdを使うようにすると良いでしょう。
次回はインラインフレーム内のプロパティなどを操作してみます。