使用JavaScript滾動iframe？

2

使用框架的內容的scrollTop屬性設置內容的垂直滾動偏移像素的具體數量（如100）：

<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>

來源

2009-08-04 20:42:49

+0

水平方向有橫向 – Rafee 2014-03-29 12:41:45

+1

什麼，請使用scrollLeft而不是scrollTop – 2014-04-02 17:31:00

+0

謝謝！我一直在努力工作太多時間試圖讓這個工作！ – 2017-12-06 22:29:15

39

可以使用onload事件時的iframe加載完成檢測，並且您可以使用iframe的contentWindow上的scrollTo函數滾動到左側和頂部（x，y）像素的已定義位置：

var myIframe = document.getElementById('iframe'); 
myIframe.onload = function() { 
    myIframe.contentWindow.scrollTo(xcoord,ycoord); 
}

您可以檢查工作示例here。

注意：如果兩個頁面都駐留在同一個域中，這將起作用。

來源

2009-08-04 20:53:46 CMS

+0

因此，如果頁面不在同一個域中，這將無法工作？ – vimist 2010-06-19 00:28:52

+2

@ Chief17 - 沒錯，它違反了Javascript的相同域名政策。 – 2010-10-25 13:55:24

2

這個jQuery解決方案：

$("#frame1").ready(function() { 

    $("#frame1").contents().scrollTop($("#frame1").contents().scrollTop() + 10); 

});

來源

2010-10-25 13:58:31

17

的靈感來自納爾遜評論我做了這個。

解決方法javascript關於在源自外部域的文檔上使用.ScrollTo（）的相同原始策略。

非常簡單的解決方法是創建一個虛擬html頁面，該頁面託管其中的外部網站，然後在該頁面加載後調用該頁面上的.ScrollTo（x，y）。然後，你需要做的唯一事情就是有一個框架或一個iframe來調出這個網站。

還有很多其他方法可以做到這一點，這是迄今爲止最簡單的方法。

*注意高度必須很大才能容納滾動條的最大值。

--home.htm

<html> 
<head> 
<title>Home</title> 
</head> 

<frameset rows="*,170"> 
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
</frameset> 
</html>

--weather.htm

<html> 
<head> 
<title>Weather</title> 
</head> 

<body onLoad="window.scrollTo(0,170)"> 

<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
</iframe> 

</body> 
</html>

來源

2012-01-18 06:20:25 Greg

0

或者，你可以設置在iframe中的margin-top ...一個黑客位，但作品在FF中至今。

#frame { 
margin-top:200px; 
}

來源

2013-07-12 16:26:09 mostlyliquid

-1

var $iframe = document.getElementByID('myIfreme'); 
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; 
childDocument.documentElement.scrollTop = 0;

來源

2013-11-07 23:42:45 user2958869

1

基於Chris's comment

CSS

.amazon-rating { 
    width: 55px; 
    height: 12px; 
    overflow: hidden; 
} 

.rating-stars { 
    left: -18px; 
    top: -102px; 
    position: relative; 
}

HAML

.amazon-rating 
    %iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}

來源

2015-03-29 04:23:57 Chloe

8

通過Nelson's和Chris'意見的啓發，我已經找到一種方法來解決辦法與同源策略div和iframe：

HTML：

<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS：

#div_iframe { 
    border-style: inset; 
    border-color: grey; 
    overflow: scroll; 
    height: 500px; 
    width: 90% 
} 

#frame { 
    width: 100%; 
    height: 1000%; /* 10x the div height to embrace the whole page */ 
}

現在假設我想跳過第438（垂直）的iframe頁面的像素，滾動到那個位置。

JS溶液：

document.getElementById('div_iframe').scrollTop = 438

JQuery的溶液：

$('#div_iframe').scrollTop(438)

CSS溶液：

#frame { margin-top: -438px }

（單獨各溶液是不夠的，並且CSS一個的效果是有點不同，因爲你無法向上滾動查看iframed頁面的頂部。）

來源

2015-05-07 20:16:11

0

我也在使用iPad的iframe中的任何類型的javascript「scrollTo」函數時遇到了麻煩。最後找到了一個「老」的解決方案，只是哈希到一個錨點。

在我的情況下，ajax返回後，我的錯誤消息被設置爲顯示在iframe的頂部，但如果用戶已經向下滾動了一個公認的長表單，提交出去，錯誤出現「」。此外，假設用戶確實向下滾動，頂層頁面從0,0滾動並且也被隱藏。

我在加入

<a name="ptop"></a>

我的iframe文檔的頂部和

<a name="atop"></a>

到我的頂級頁面的頂部

然後

$(document).ready(function(){ 
     $("form").bind("ajax:complete", 
     function() { 
      location.hash = "#"; 
      top.location.hash = "#"; 
      setTimeout('location.hash="#ptop"',150); 
      setTimeout('top.location.hash="#atop"',350); 
     } 
    ) 
    });

iframe中。

您必須在頂部頁面之前對iframe進行散列或者只有iframe將滾動並且頂部將保持隱藏狀態，但由於超時時間間隔的原因，它有點「跳躍」。我想象標籤始終會允許各種「scrollTo」點。

來源

2015-10-29 13:08:20

使用JavaScript滾動iframe？

回答

相關問題