web-dev-qa-db-ja.com

JavaScriptでiframeをスクロールしますか？

JavaScriptでiframeを動的にロードします。ロードされた後、特定の数のピクセルを下にスクロールさせるにはどうすればよいですか（iframeのページがロードされた後、iframeをページの指定された領域に自動的にスクロールさせるにはどうすればよいですか？）

javascriptiframescroll
48
rawrrrrrrrr

onloadイベントを使用して、iframeの読み込みが完了したことを検出できます。iframeのcontentWindowで scrollTo 関数を使用して、定義されたピクセル位置にスクロールできます。 、左から上（x、y）：

var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
    myIframe.contentWindow.scrollTo(xcoord,ycoord);
}

実際の例を確認できます here 。

注：これは、両方のページが同じドメインにある場合に機能します。

44
CMS

ネルソンのコメントに触発されて、私はこれを作りました。

外部ドメインで作成されたドキュメントでの.ScrollTo（）の使用に関するjavascript Same Originポリシーの回避策。

このための非常に簡単な回避策は、外部のWebサイトをホストするダミーのhtmlページを作成し、読み込まれたらそのページで.ScrollTo（x、y）を呼び出すことです。次に、あなたがする必要があるのは、フレームまたはiframeでこのWebサイトを立ち上げることだけです。

他の多くの方法がありますが、これは最も簡単な方法です。

*スクロールバーの最大値に対応するには、高さが大きくなければならないことに注意してください。

--home.htm

<html>
<head>
<title>Home</title>
</head>

<frameset rows="*,170">
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</frameset>
</html>

--weather.htm

<html>
<head>
<title>Weather</title>
</head>

<body onLoad="window.scrollTo(0,170)">

<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</iframe>

</body>
</html>
19
Greg

Nelson's と Chris ' のコメントに触発され、divとiframeを使用して同じOriginポリシーを回避する方法を見つけました。 ：

HTML：

<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS：

#div_iframe {
  border-style: inset;
  border-color: grey;
  overflow: scroll;
  height: 500px;
  width: 90%
}

#frame {
  width: 100%;
  height: 1000%;   /* 10x the div height to embrace the whole page */
}

ここで、iframeページの最初の438（垂直）ピクセルをその位置までスクロールしてスキップしたいとします。

JSソリューション：

document.getElementById('div_iframe').scrollTop = 438

JQueryソリューション：

$('#div_iframe').scrollTop(438)

CSSソリューション：

#frame { margin-top: -438px }

（各ソリューションだけで十分です。CSSの効果は、iframeされたページの上部を表示するために上にスクロールできないため、少し異なります。）

13
Sony Santos

フレームのコンテンツのscrollTopプロパティを使用して、コンテンツの垂直スクロールオフセットを特定のピクセル数（100など）に設定します。

<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
4
Justin Ludwig

JQueryソリューション：

$("#frame1").ready( function() {

  $("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );

});
3
Steve Claridge

または、iframeにマージントップを設定することもできます...ちょっとしたハックですが、今のところFFで動作します。

#frame {
margin-top:200px;
}
0
mostlyliquid

また、iPadのiframeであらゆる種類のjavascript "scrollTo"関数を使用するのに問題がありました。最後に、問題の「古い」解決策を見つけました。アンカーにハッシュするだけです。

私の状況では、ajaxが返された後、エラーメッセージはiframeの上部に表示されるように設定されていましたが、ユーザーが明らかに長い形式でスクロールダウンした場合、サブミットは終了し、エラーは「スクロールせずに見える」さらに、ユーザーがスクロールダウンすると、トップレベルのページが0,0からスクロールされて非表示になります。

追加した

<a name="ptop"></a>

iframeドキュメントの先頭に

<a name="atop"></a>

トップレベルページのトップへ

それから

    $(document).ready(function(){
      $("form").bind("ajax:complete",
        function() {
          location.hash = "#";
          top.location.hash = "#";
          setTimeout('location.hash="#ptop"',150);
          setTimeout('top.location.hash="#atop"',350);
        }
      )
    });

iframeで。

トップページの前にiframeをハッシュする必要があります。そうしないと、iframeのみがスクロールされてトップが非表示のままになりますが、タイムアウト間隔のために少し「ジャンピー」になります。タグ全体でさまざまな「scrollTo」ポイントが許可されると思います。

0
G. Andrews