點擊iframe→父窗口滾動到位置？

在點擊iframe中的任何位置時，我希望我的父頁滾動到位於該iframe底部以下的位置。但是無論我在這裏放置多大的偏移量，父母都會滾動，直到iframe的底部與視口的底部對齊 - 再遠一點。我怎樣才能讓它滾動超越？點擊iframe→父窗口滾動到位置？

$('#iframe1').click(function() { 
    $('html,body', window.parent.document).animate({ 
     scrollTop: '+=' + 700 + 'px' 
    }, 'fast'); 
});

來源

2012-09-13 monkey blot

從我測試了以下工作只是覺得在所有四個瀏覽器我測試過（火狐，IE，Chrome和Safari）：

主頁：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>Main Page</title> 
</head> 
<body> 
    <iframe src="iframe.html" style="width:400px; height:500px;"></iframe> 
    <div style="width: 200px;"> 
    <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, 
     pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed 
     fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem 
     nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet 
     luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui 
     suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare, 
     nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed 
     arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl 
     sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae 
     magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere 
     vitae, molestie vitae elit. 
    </p> 
    <p> 
     Nullam nec lorem id turpis iaculis pretium. Pellentesque quam libero, pulvinar 
     vitae viverra at, tincidunt vel dui. Mauris libero nibh, posuere eget aliquet 
     eget, fermentum nec mi. Cras at venenatis ipsum. Fusce sed fermentum ante. Nam 
     varius quam in lectus dignissim consequat. Cras semper, ligula eu ullamcorper 
     pulvinar, orci quam vulputate lorem, vel dignissim lectus ipsum a justo. Etiam 
     nibh nisi, tristique sit amet adipiscing in, volutpat non dolor. Etiam eros mi, 
     consectetur sed adipiscing ut, egestas vel mauris. Pellentesque habitant morbi 
     tristique senectus et netus et malesuada fames ac turpis egestas. Donec lacus 
     leo, feugiat ac lacinia ac, aliquam quis ante. In eleifend gravida lectus, vitae 
     rhoncus erat sagittis quis. In in nibh at risus faucibus dignissim. 
    </p> 
    </div> 
</body> 
</html>

iframe內容：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
    <title>iframe Page</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    /// wait till document ready 
    $(function(){ 
     /// target the entire iframe page for a click 
     $('body').click(function() { 
      /// step back to the parent window and tell it to animate scroll 
      $('html,body', window.parent.document).animate({ 
       scrollTop: '+=700px' 
      }, 'fast'); 
     }); 
    }) 
    </script> 
</head> 
<body> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim diam, 
    pharetra at aliquam sed, luctus vel augue. Donec nec hendrerit velit. Sed 
    fermentum volutpat libero a viverra. Mauris gravida cursus pulvinar. Morbi lorem 
    nunc, pretium ut sollicitudin vel, facilisis ac ligula. Vestibulum imperdiet 
    luctus augue, id euismod diam posuere ut. Suspendisse commodo ante nec dui 
    suscipit ullamcorper porta justo consequat. Sed et eleifend erat. Duis ornare, 
    nisi id hendrerit commodo, mauris metus dapibus arcu, ac tempor arcu justo sed 
    arcu. Sed elementum ornare dolor, ac malesuada est vulputate non. Etiam nisl 
    sapien, vestibulum ut blandit sed, suscipit vel erat. Sed elementum orci vitae 
    magna vulputate consequat at ac lorem. Aenean libero risus, ornare sed posuere 
    vitae, molestie vitae elit. 
    </p> 
</body> 
</html>

以上我沒有遇到任何問題，所以我只能假設在你的頁面的設置中存在導致問題的東西。我不知道你的代碼是如何通過直接在iframe上放置一個'click'處理程序來工作的（這在我的任何測試中都不起作用）因此它可能在別處有另一個點擊函數被觸發並不像您期望的那樣滾動頁面？無論是它或它可能是一個浮動或位置問題（關於你的iframe），但如果你說你可以手動滾動到正確的位置，那麼我懷疑這將是一個原因。

來源

2012-09-13 22:49:43 Pebbl

還有更多的iframe下面的頁面。我可以滾動到此以外，手動移動到所需的位置。 –

如果沒有爲您的問題添加一些代碼和標記，則有點難以分辨出我害怕的事情。 – Pebbl

實際上，這可能是因爲您同時滾動了html和body？雖然其中一個或另一個會適用於不同的瀏覽器，但它可能會導致出現奇怪的事情。如果您只是使用「body」，會發生什麼情況？ – Pebbl

我發現的最簡單的方法是修改您的IFRAME的HTML包含的onload =「window.parent.parent.scrollTo（0,0）」因爲在這個例子中：

<iframe src="https://myiframe.com" width="100%" height="1500px" onload="window.parent.parent.scrollTo(0,0)" />

來源

2014-06-12 23:14:09

點擊iframe→父窗口滾動到位置？

回答

相關問題