web-dev-qa-db-ja.com

iframeのscrollTopを取得する方法

ウィンドウがiframeの場合、jQueryのscrollTopはnullを返します。誰かがiframeのscrollTopを取得する方法を理解できましたか？

より詳しい情報：

スクリプトがiframe自体で実行されており、親ウィンドウが別のドメインにあるため、iframeのIDなどにアクセスできません

jqueryiframedimensions
19
mkoryak

次の設定を使用してscrollTopを設定できます。

$("html,body").scrollTop(25);

したがって、次のようにしてみてください。

$("html,body").scrollTop();

異なるブラウザが異なる要素（bodyまたはhtml）にscrollTopを設定するためです。

scrollToプラグインから：

しかし、それでもおそらく特定のブラウザでは失敗するでしょう。 Ariel Flesher's scrollTo plugin for jQuery のソースコードの関連セクションを次に示します。

// Hack, hack, hack :)
// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
$.fn._scrollable = function(){
  return this.map(function(){
    var elem = this,
      isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;

    if( ! isWin ) {
      return elem;
    }


    var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;

     return $.browser.safari || doc.compatMode == 'BackCompat' ?
       doc.body : 
       doc.documentElement;
  });
};

次に、以下を実行します。

$(window)._scrollable().scrollTop();

Iframeがどれだけ下にスクロールしたかを判別します。

10
Doug Neiner
$('#myIframe').contents().scrollTop()
25
Adam V.

IFrame内にscrollTopを設定しようとしたときにこの質問を見つけました...正確にあなたの質問（GETしたかった）ではありませんが、ここでSETしようとしている人のためにiframe内に解決策があります。

ページの上部にスクロールする場合これは機能しません iframe内：

$("html,body").scrollTop(0);

ただし、これは機能します。

document.getElementById("wrapper").scrollIntoView();

またはjQueryと同等：

 $("#wrapper")[0].scrollIntoView();

このマークアップ（iframe内に含まれる）の場合：

<html>
  <body>
    <div id="wrapper">
      <!-- lots of content -->
    </div>
  </body>
</html>
24
Chris Jacob

古き良きJavaScript：

scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
5
dudkaman
$('#myIframe').contents().scrollTop(0);

パラメータとして「0」でのみ機能します

2
Peppeneppe

私はしようとしています

_$('#myIframe').contents().scrollTop(0);
_

そして

_ let scrollTop = document.getElementById(IFRAME_ID).contentWindow.document.body.scrollTop;
_

最初の関数は、デスクトップブラウザーで成功しました。モバイルブラウザで動作しません。だから私はscrollIntoViewで別の関数を使用します

_$("#ButtonId").click(function() {
        var win = document.getElementById(IFRAMEID).contentWindow;
        var scrollTop = win.document.documentElement.scrollTop || win.pageYOffset || win.document.body.scrollTop;
        // scrollTop can getted
        if (scrollTop) {
            win.document.documentElement.scrollTop = 0;
            win.pageYOffset = 0; // safari
            win.document.body.scrollTop = 0;
        } else {
            win.document.body.scrollIntoView(true); // let scroll to the target view 
        }
    });
_

scrollIntoView()ビュー scrollIntoView-MDN

1
林平君

またはこれを使う

sample.showLoader = function() {
// show cursor wait
document.getElementsByTagName('body')[0].style.cursor = 'wait';
var loader = $('#statusloader');
// check if we're runnign within an iframe
var isIframe = top !== self;
if (isIframe) {
    var topPos = top.pageYOffset + 300;
    // show up loader in middle of the screen
    loader.show().css({
        top : topPos,
        left : '50%'
    });
} else {
    // show up loader in middle of the screen
    loader.show().css({
        top : '50%',
        left : '50%'
    });
}
};
0
hypery2k

IFrameを使用すると、Windowsの「メッセージ」イベントでiFrameを使用する必要があります。

詳しくはこちら 情報

On Child View（Iframe）

window.top.postMessage(0 + '$' + 'form-iframe-top', "*");

親ビューで

   window.addEventListener("message",function(e) {
       if (e && e.data && typeof e.data == "string" && e.data != undefined) {
         var data = e.data.split("$");
             if (data.length == 2) {
               var scroll_height = data[0], iframe_id = data[1];
               if(iframe_id=="form-iframe-top"){
                   window.scrollTo(0,scroll_height);
                   return;
                  }
               }
          }
         },
        false
      );

**私は「*」をセパレータとして使用したことに注意してください、あなたは何でも使用できます

0
eliprodigy

私はここでゲームに遅れていることを知っていますが、モバイルの長いリストでこれを理解しようとしていました。クロスドメインの競合のため（そして親ウィンドウにアクセスできなかったため）、scrollTop（）は機能しませんでしたが、高さを変更すると次のようになりました。

$('#someClickableElementInIFrame').on('click', function(e){
      $("html body").animate({
      'height' : "0"
    }, {
        complete: function(){
          $("html body").css({
            'height' : "auto"
            })
          }
      })
});
0
BenTheHumanMan