Как прокрутить родительскую страницу вверх, когда дочерняя страница нажата в iframe?

Когда кто-то нажимает на ссылку внутри iframe (дочерняя страница), как мне получить родительскую страницу для прокрутки вверх? Проблема в том, что дочерняя страница останется в том же месте страницы, потому что iframe имеет большую высоту, большую, чем исходная.

Обратите внимание: родительская и дочерняя страницы находятся в разных поддоменах.

Я создал демоверсию, чтобы показать это: http://www.apus.edu/_test/iframe/index.htm

Ответ 1

Трюк заключается в том, чтобы добавить onload="window.parent.parent.scrollTo(0,0)" в iframe следующее:

Ответ 2

Используя JavaScript внутри iframe, обратитесь к родительскому объекту и вызовите метод scroll().

window.parent.scroll(0,0);

Ответ 3

Если у вас есть перекрестное происхождение (iframe и родительский имеют разные домены), то просто вызов window.scrollTo(0,0) не будет работать.

Одним из решений для перекрестного происхождения является отправка доверенного сообщения из 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);
}

Ответ 4

На странице Iframe.

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

На странице:

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