2

iframe 内の任意の場所をクリックすると、親ページがその iframe の下部にある位置にスクロールするようにします。しかし、ここでオフセットにどれだけ大きな数を入れても、親は iframe の下部がビューポートの下部と揃うまでスクロールするだけです。それを超えてスクロールするにはどうすればよいですか？

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

2 に答える 2

2

私のテストから、次の作品は、私がテストした 4 つのブラウザー (Firefox、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自体に直接配置することでコードがどのように機能しているかわかりません（これは私のテストでは機能しません）。トリガーされている別のクリック機能がある可能性があります。期待したほどページをスクロールしませんか? それか、フロートまたは位置の問題（iframeに関して）である可能性がありますが、手動で正しい場所にスクロールできると言う場合、これが原因であるとは思えません。

于 2012-09-13T22:49:43.003 に答える