使用 JavaScript 滾動 iframe？

Question

我使用 JavaScript 動態加載 iframe。 加載后，如何讓它向下滾動特定數量的像素（即在 iframe 中的頁面加載后，如何讓 iframe 自行滾動到頁面的指定區域？）

Answer 1

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

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

您可以在此處查看工作示例。

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

Answer 2

受到尼爾森評論的啟發，我做了這個。

關於在源自外部域的文檔上使用.ScrollTo( ) 的 javascript 同源策略的解決方法。

非常簡單的解決方法是創建一個虛擬 HTML 頁面，在其中托管外部網站，然后在該頁面加載后調用 .ScrollTo(x,y) 。 那么您唯一需要做的就是使用框架或 iframe 來打開該網站。

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

*注意高度必須足夠大以適應滾動條的最大值。

--home.html

<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.html

<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>

Answer 3

受Nelson和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 */
}

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

JS解決方案：

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

JQuery 解決方案：

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

CSS 解決方案：

#frame { margin-top: -438px }

（每個解決方案都足夠了，CSS 的效果有點不同，因為您無法向上滾動以查看 iframed 頁面的頂部。）

Answer 4

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

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

Answer 5

一個 jQuery 解決方案：

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

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

});

Answer 6

根據克里斯的評論

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'}

Answer 7

或者，您可以在 iframe 上設置一個 margin-top ...有點 hack，但到目前為止在 FF 中工作。

#frame {
margin-top:200px;
}

Answer 8

對滾動進行編程時的主要問題與將整個文檔嵌入到頁面中有關，請記住 Iframe 將是主文檔中的整頁（標題和全部），因此，在實際滾動之前，您需要獲取內部文檔，而不僅僅是容器，因此您實際上可以滾動到。

我們添加了sendure兼容性驗證，contentDocument和windows的區別可以在這里找到

有了這個，最終代碼將是：

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

Answer 9

我在 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”點。

使用 JavaScript 滾動 iframe？

問題描述

9 個解決方案

解決方案1
59 2009-08-04 20:53:46

解決方案2
25 2012-01-18 06:20:25

解決方案3
24 2015-05-07 20:16:11

解決方案4
11 2009-08-04 20:42:49

解決方案5
5 2010-10-25 13:58:31

解決方案6
2 2015-03-29 04:23:57

解決方案7
1 2013-07-12 16:26:09

解決方案8
1 2013-11-07 23:42:45

解決方案9
0 2015-10-29 13:08:20

使用 JavaScript 滾動 iframe？

問題描述

9 個解決方案

解決方案1 59 2009-08-04 20:53:46

解決方案2 25 2012-01-18 06:20:25

解決方案3 24 2015-05-07 20:16:11

解決方案4 11 2009-08-04 20:42:49

解決方案5 5 2010-10-25 13:58:31

解決方案6 2 2015-03-29 04:23:57

解決方案7 1 2013-07-12 16:26:09

解決方案8 1 2013-11-07 23:42:45

解決方案9 0 2015-10-29 13:08:20

解決方案1
59 2009-08-04 20:53:46

解決方案2
25 2012-01-18 06:20:25

解決方案3
24 2015-05-07 20:16:11

解決方案4
11 2009-08-04 20:42:49

解決方案5
5 2010-10-25 13:58:31

解決方案6
2 2015-03-29 04:23:57

解決方案7
1 2013-07-12 16:26:09

解決方案8
1 2013-11-07 23:42:45

解決方案9
0 2015-10-29 13:08:20