Làm cách nào để cuộn trang mẹ lên trên cùng khi trang con nhấp vào iframe?

Question

Khi ai đó nhấp vào liên kết trong iframe (trang con), làm cách nào để tôi có được trang gốc để cuộn lên trên cùng? Vấn đề là trang con sẽ vẫn ở cùng một vị trí của trang vì khung nội tuyến có nhiều chiều cao lớn hơn trang gốc.

Xin lưu ý: trang gốc và trang con nằm trên các miền phụ khác nhau.

Tôi tạo ra một bản demo để hiển thị này: http://www.apus.edu/_test/iframe/index.htm

Answer 1

Bí quyết là để phụ thêm onload="window.parent.parent.scrollTo(0,0)" sau vào iframe và rằng nên làm điều đó!

Answer 2

Sử dụng JavaScript trong khung nội tuyến, tham khảo phụ huynh và gọi phương thức scroll().

window.parent.scroll(0,0); 

Answer 3

Trong trang khung nội tuyến.

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

On The trang parrent:

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

Answer 4

Nếu bạn có nguồn gốc chéo (các iframe và phụ huynh có tên miền khác), sau đó chỉ cần gọi window.scrolTo (0,0) sẽ không làm việc .

Một giải pháp cho nguồn gốc chéo là gửi tin nhắn đáng tin cậy từ khung nội tuyến đến phụ huynh.

Mã bên trong iframe:

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

Sau đó, mã trong các phụ huynh:

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); 
}