ページ訪問時にiframe内を自動スクロールしたい

解決済

質問者：tomorrow_005
質問日時：2011/10/22 00:41
回答数：1件

iframe内に表示した内容（aaa.html）を、
ページ訪問時（もしくは更新時）に自動的に100px下にスクロール
させたいと思っていますが、うまくできず困っています。

将来的にはif文によってスクロール位置を変えたいと考えています。
またサイトの都合上、アンカータグを使用しての位置指定はできません。

JavaScriptの使い方が間違っているのでしょうか？
ご教示お願い致します。

以下ソースです。

framescroll.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// 縦スクロール－上
function framescrollu() {
document.getElementById("frame1").contentWindow.scrollBy(0,-100);}
// 縦スクロール－下
function framescrolld() {
document.getElementById("frame1").contentWindow.scrollBy(0,100);}

</script>
</head>

<body>
<center>

<script type="text/javascript">
// 自動スクロール－下に100
document.getElementById("frame1").contentWindow.scrollBy(0,100);}
</script>


<form>
<input type="button" value="up" onClick="JavaScript:framescrollu()">
<input type="button" value="down" onClick="JavaScript:framescrolld()">
</form>
<br>

<iframe id="frame1" src="aaa.html" name="frame1" frameborder="1" scrolling="auto" width="200" height="200">
</iframe>

</center>
</body>
</html>

aaa.html

ああああああああああああああああああああああ<br>
いいいいいいいいいいいいいいいいいいいいいい<br>
うううううううううううううううううううううう<br>
ええええええええええええええええええええええ<br>
おおおおおおおおおおおおおおおおおおおおおお<br>
ああああああああああああああああああああああ<br>
いいいいいいいいいいいいいいいいいいいいいい<br>
うううううううううううううううううううううう<br>
ええええええええええええええええええええええ<br>
おおおおおおおおおおおおおおおおおおおおおお<br>
ああああああああああああああああああああああ<br>
いいいいいいいいいいいいいいいいいいいいいい<br>
うううううううううううううううううううううう<br>
ええええええええええええええええええええええ<br>
おおおおおおおおおおおおおおおおおおおおおお<br>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： pringlez
回答日時：2011/10/22 09:43

2つ問題があります。

framescroll.html　22行目
閉じカッコが余分。
誤：document.getElementById("frame1").contentWindow.scrollBy(0,100);}
正：document.getElementById("frame1").contentWindow.scrollBy(0,100);

元のソースはJavaScriptエラーが出ていました。
しかしこう直してもエラーは出なくなりましたが動きませんでした。

もうひとつの問題はスクリプトが呼ばれるタイミングです。
scriptタグのグローバルな部分に記述されているので
ブラウザがHTMLソースのscriptタグのところまで読み込んだ瞬間に実行されるからでしょう。
つまりiframeの中身の準備が完了する前にスクリプトが実行されてしまっていると。
初心者が陥るよくある問題です。

ページがすべて読み込まれた後にスクリプトを実行させたいのでしょうから
「<body onload="framescrolld()">」などとすればOKです。

IE8だけですが動作確認しました。