當用戶在iframe中導航時，強制iframe的父頁面自動滾動到頂部？

iFrame加載問題當iFrame加載到客戶端頁面時，我們看到頁面位置在跳轉，並且在絕大多數情況下，我們看到頁面上的頁面焦點較低。這迫使必須向上滾動才能看到iframe應用程序。當用戶在iframe中導航時，強制iframe的父頁面自動滾動到頂部？

我試圖通過使用來解決這個問題：

$（ 'HTML，身體'，window.parent.document）.animate（{ scrollTop的： '0像素' }， '快'）;

IFRAME ID =「clientID的」類=「廣告」 SRC =「https://www.our-application.com」

這不起作用，因爲客戶端的網站和我們的iframe的基於應用程序窗口都在不同的領域，所以我們無法直接訪問window.parent中存在的跨域問題。

請建議如何解決這個問題請幫助

來源

2017-05-05 Rahul Joshi

可能重複[獲取父頁面滾動到頂部，當iframe的表單驗證失敗]（http://stackoverflow.com/questions/24911422/get-parent-page-to-scroll-to-top-when -iframes-form-validation-fails） –

這個答案只會工作，只要你可以添加一個JavaScript事件監聽器父頁面。

客戶端頁面上的'message'事件偵聽器可以使用window.parent.postMessage()函數 - 請參閱下面的Mozilla文檔。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

的想法是，你的iframe中使用JavaScript來發布消息到父窗口。

父窗口包含一個事件偵聽器，然後滾動到頂部。

您應特別注意上述文檔中的安全問題。

這個答案提供了代碼示例https://stackoverflow.com/a/24914498/7326037

在父窗口中，我有

function receiveMessage(e){ 

    console.log("Received Message: " + e); 

    if (e.originalEvent.origin === 'http://www.site.client.com') { 
    $("html, body").animate({ 
     scrollTop : 441 
    }, "fast"); 
    } 
} 
$(window).bind("message", receiveMessage);

，並添加了這個原始的js代碼的iframe內容：

window.parent.postMessage("Scroll", "http://www.site.client.com/");

這會導致iframe發佈一條由父級捕獲的消息。由於這是發佈的唯一消息，因此當且僅當域匹配時，纔會使用它來觸發滾動事件。

來源

2017-05-05 10:45:06

你好，謝謝你的建議但是我們不能說我們的客戶端添加JavaScripts，而是我們只需要提供一個元素，它是** iframe id =「clientID」class =「ad」src =「https://www.our-application.com」**沒有其他...任何解決方案，而不在客戶端域添加任何東西？ –

正如您所提到的，您的iframe位於不同的域中，因此[同源策略]（https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy）將阻止您控制客戶'窗口'。所以我認爲，如果不在他們的網站中添加一個JavaScript偵聽器，你可能無法實現這一點。 –

有沒有其他建議？ –

當用戶在iframe中導航時，強制iframe的父頁面自動滾動到頂部？

回答

相關問題