第84回 「インラインフレーム内のプロパティを変更する」
今回はインラインフレーム内のプロパティを変更する方法について説明します。
前回の最後に掲載したスクリプトの一部を変更するだけでインラインフレーム内のプロパティを操作することができます。前回はインラインフレームのURLを指定しましたが、変わりに背景色のスタイルを指定してみましょう。これは以下のようになります。
document.getElementById("cFrame").style.backgroundColor = "yellow";
これでインラインフレーム内の背景色が黄色になります。（Mac版IE5は動作がおかしく枠のみ色が変更されます）
これはInternte ExplorerだけでなくFirefox、Safariなどでも動作します。
実際のプログラムは以下のようになります。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function changeBGColor()
{
document.getElementById("cFrame").style.backgroundColor = "yellow";
}
// --></script>
</head>
<body>
<form>
<input type="button" value="背景色を変更" onClick="changeBGColor()"
</form>
<iframe src="page1.html" id="cFrame"></iframe>
</body>
</html>
背景色だけでなくページ内に表示されている文字も書き換えることができます。文字を書き換える方法としては、いくつかあります。文字を書き換えるには、あらかじめ書き換える文字をdivタグなどで囲んでおき、IDを指定しておきます。
書き換える側は以下のようにしてIDを指定します。
<html>
<head>
<title>Sample</title>
</head>
<body>
<div id="
iData">最初のテキスト</div>
</body>
</html>
ここで指定したIDを使って以下のようにスクリプトで指定します。
<html>
<head>
<title>Sample</title>
<script language="JavaScript"><!--
function changeText()
{
txt = document.aForm.iText.value;
cFrame.
iData.innerHTML = txt;
}
// --></script>
</head>
<body>
<form name="aForm">
表示内容：<input type="text" name="iText">
<input type="button" value="表示内容を変更" onClick="changeText()">
</form>
<iframe src="page2.html" id="cFrame"></iframe>
</body>
</html>
cFrame.iData.innerHTML = txt;の部分でインラインフレーム内の文字を書き換えています。
ただし、この方法はInternet ExplorerとSafariでは動作しますが、Firefoxなどではエラーになり動作しません。また、セキュリティの都合上、異なるドメイン（異なるサーバー）間ではエラーとなり処理できません。
インラインフレームやフレーム内容を書き換える場合には、セキュリティがらみで期待通り動作しない場合もあります。表示内容の操作はできるが、なるべくならば、そのような行為は避けるのがよいでしょう。