使用iframe和JavaScript滾動父頁面

我在尋找什麼應該是一個基本的腳本（我認爲）一些幫助，但我不能完全弄清楚自己..使用iframe和JavaScript滾動父頁面

我有一個頁面，與一個iFrame，顯示一個頁面，我只能訪問標題。我想這樣做，當有人點擊iFrame窗口中的任何鏈接（標籤）時，它會將我的父頁滾動到頂部（或特定位置）。這可能嗎？

編輯此外，如果它很重要，我已經在使用David Bradshaw的iFrame resizer腳本來動態調整幀大小，它使用postmessage來傳遞frame-> page。 https://github.com/davidjbradshaw/iframe-resizer

EDIT2：父窗口和iframe窗口是跨域

來源

2014-09-26 flipnotic

http://stackoverflow.com/questions/935127/how-to-access-parent-iframe-from -javascript – CodeHunter 2014-09-26 17:14:07

最新版本的iframe-resizer作爲滾動頁面的選項，也支持頁面鏈接。 – 2015-03-15 20:34:59

見Trigger events in iframe's parent window

添加一些JS到iframe頁面：

$(document).ready(function(){ 
    $('a').click(function(){ 
     window.parent.$(window.parent.document).trigger('scroll'); 
    }); 
});

然後父頁上：

$(document).bind('complete', function(){ 
    //Add scroll code. 
});

您可以使用發佈消息做類似的事情，但如果你控制兩個頁面，他們在同一個域，這應該工作。如果他們在不同的域（你沒有指定），你會被postMessage卡住，我認爲它不是完全跨瀏覽器的complient，因此不能在所有設置上工作，並且確實沒有後備。

如果你想使用的postMessage和你正在使用的插件，只是這樣做

window.addEventListener("message",function(event){ 
    if(event.origin == 'http://yourdomain.com'){ 
     if(event.data == 'messageString'){ 
      //Add scroll code 
     } 
    } 
});

來源

2014-09-26 17:10:39 Leeish

對不起，我添加了一個編輯。我忘了提及這是跨域的。 – flipnotic 2014-09-26 18:04:17

跨域你使用post信息被卡住了。我確實沒有其他方式相信。 – Leeish 2014-09-26 18:23:19

這裏有一篇很好的文章解釋了所有這些：https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage實際上它非常簡單。 – Leeish 2014-09-26 18:24:08

使用iframe和JavaScript滾動父頁面

回答

相關問題