Cliquez sur iframe → La fenêtre parent défile pour positionner?

En cliquant n'importe où dans un iframe, je veux que ma page parente défile vers une position qui est en dessous du bas de cette iframe. Mais peu importe le nombre de chiffres que j'ai mis pour le décalage ici, le parent défile seulement jusqu'à ce que le bas de l'iframe soit aligné avec le bas de la fenêtre - pas plus loin. Comment puis-je l'obtenir pour aller au-delà de ça?Cliquez sur iframe → La fenêtre parent défile pour positionner?

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

Source

2012-09-13 monkey blot

De mes tests, les travaux suivants trouvent seulement dans les quatre navigateurs que j'ai testé (Firefox, IE, Chrome et Safari):

page principale:

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

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

Avec ce qui précède, je n'ai aucun problème, donc je peux seulement supposer qu'il y a quelque chose dans la configuration de votre page qui cause le problème. Je ne sais pas comment votre code fonctionne en plaçant un gestionnaire 'click' directement sur l'iframe lui-même (cela ne fonctionne pas dans aucun de mes tests) donc il se peut que vous ayez une autre fonction de clic ailleurs déclenchée et ne fait pas défiler la page autant que prévu? Soit cela ou cela pourrait être un problème de flottement ou de position (en ce qui concerne votre iframe), mais si vous dites que vous pouvez faire défiler manuellement au bon endroit alors je doute que ce soit une cause.

Source

2012-09-13 22:49:43 Pebbl

Il y a plus à la page ci-dessous l'iframe. Je peux défiler au-delà, jusqu'à la position désirée manuellement. –

Sans code et balisage ajoutés à votre question, il est un peu difficile de dire ce qui se passe, j'ai peur. – Pebbl

effectivement, il pourrait être parce que vous faites défiler le html et le corps simultanément? Tandis que l'un ou l'autre fonctionnera pour différents navigateurs, cela peut causer quelque chose d'étrange. Que se passe-t-il si vous utilisez juste 'body'? – Pebbl

La solution la plus simple que j'ai trouvé est de modifier votre iframe HTML pour inclure onload = "window.parent.parent.scrollTo (0,0)" comme dans cet exemple:

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

Source

2014-06-12 23:14:09

Cliquez sur iframe → La fenêtre parent défile pour positionner?

Répondre

Questions connexes