web-dev-qa-db-ja.com

子ページがiframe内でクリックされたときに親ページを上にスクロールするにはどうすればよいですか？

誰かがiframe（子ページ）内のリンクをクリックした場合、親ページを最上部までスクロールするにはどうすればよいですか？問題は、iframeの高さが親ページよりも大きいため、子ページがページの同じ場所に残ることです。

注：親ページと子ページは異なるサブドメインにあります。

これを示すデモを作成しました： http://www.apus.edu/_test/iframe/index.htm

iframescrollparent
35
Evan

秘Theは、次のonload="window.parent.parent.scrollTo(0,0)"をiframeに追加することです。

52
Evan

Iframe内でJavaScriptを使用して、親を参照し、 scroll（） メソッドを呼び出します。

window.parent.scroll(0,0);
11
James Lawruk

クロスオリジン（iframeと親のドメインが異なる）がある場合、window.scrollTo（0,0）を呼び出すだけでは機能しません。

クロスオリジンの1つの解決策は、iframeから親に信頼できるメッセージを送信することです。

iframe内のコード：

var parent_Origin = 'http://your/iframe/domain/here'
parent.postMessage({'task': 'scroll_top'}, parent_Origin);

親のコード：

function handleMessage(event) {
    var accepted_Origin = 'http://your/iframe/domain/here';
    if (event.Origin == accepted_Origin){
        if (event.data['task'] == 'scroll_top'){
           window.scrollTo(0,0);
        }
        // you can have more tasks
    } else{
        console.error('Unknown Origin', event.Origin);
    }
}

window.onload = function() {
    window.addEventListener("message", handleMessage, false);
}
10
Doaa

Iframeページ内。

window.parent.ScrollToTop(); // Scroll to top function

親ページで：

window.ScrollToTop = function(){
  $('html,body', window.document).animate({
    scrollTop: '0px'
  }, 'fast');
};
4
steffanjj