Comment puis-je changer la taille de l'iframe à partir de l'intérieur?

Je suis en développement avec jquery et je suis tombé avec le problème suivant: j'ai ajouté un IFrame à l'intérieur de la page principale et je veux re de la taille de l'intérieur. J'ai essayé quelques idées, mais sans succès.

Voici mon code:

index.html

<html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <iframe id="myframe" src="frame.html" width="100px" height="100px"></frame>
    </body>
</html>

frame.html

<html>
    <head>
        <title>IFrame</title>
        <script>
            document.width = 500;
            document.height = 500;
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
    </body>
</html>
InformationsquelleAutor Jillian | 2013-08-27
  1. 37

    Lorsque vous créez un IFRAME le navigateur ajoute automatiquement un 'window' objet de l'IFRAME à l'intérieur de la 'window' objet de la page principale.

    Vous avez besoin de changer la taille de la IFRAME au lieu de la taille du document.

    Essayez ce code:

    Pour JavaScript:

    window.parent.document.getElementById('myframe').width = '500px';
window.parent.document.getElementById('myframe').height = '500px';

    Et pour jQuery:

    $('#myframe', window.parent.document).width('500px');
$('#myframe', window.parent.document).height('500px');
    • Je devine que ce ne peut pas être fait à partir d'un domaine différent, non?
    • Oui, les différents domaines échoue avec le message suivant dans google Chrome: Uncaught SecurityError: Blocked a frame with origin "http://anotherwebsite.com" from accessing a frame with origin "http://mywebsite.com". Protocols, domains, and ports must match.
    • Je n'ai pas cette erreur. Comme une preuve de concept: jperelli.com.ar/covert_channel_iframe_resize
    • vous êtes y compris l'iframe à partir d'un sous-domaine de votre domaine, c'est sans doute pourquoi il fonctionne?
    InformationsquelleAutor ifm
  2. 16

    Si les deux pages sont sur le même domaine (ou même sous-domaine si vous définissez le document.de domaine peut-être, n'a pas le tester), vous pouvez simplement définir à partir de javascript (jQuery):

    HTML:

    window.parent.document.getElementById('myframe').width = '500px';

    Si vous les pages sont dans des domaines différents, une solution consisterait à ajouter un écouteur d'événement dans la page qui appelle l'iFrame (crédits de Marty Mulligan):

    HTML:

    <html>
<head>
    <title>Index</title>
	<script src="/js/jquery/js/jquery.1.10.2.min.js"></script>
	<script>
		window.addEventListener('message', function(e) {
			debugger;
		  var iframe = $("#myIframe");
		  var eventName = e.data[0];
		  var data = e.data[1];
		  switch(eventName) {
			case 'setHeight':
			  iframe.height(data);
			  break;
		  }
		}, false);
	</script>
</head>
<body>
    <iframe id="myIframe" src="http://hofvanzeeland.net/frame.html" width="100px" height="100px" border="1"></frame>
</body>
</html>

    et de déclencher à partir du contenu de l'iFrame (frame.html):

    HTML:

    <html>
    <head>
        <title>IFrame</title>		
        <script>            
			function resize() {
			  var height = document.getElementsByTagName("html")[0].scrollHeight;
			  window.parent.postMessage(["setHeight", height], "*"); 
			}
        </script>
    </head>
    <body>
        <h2>My IFrame</h2>
		<a href="#" onclick="resize()">Click me</a>
    </body>
</html>

    • Très bien expliqué !! A fonctionné pour moi !
    • Yo énorme risque de sécurité ici pour être au courant des via SOCIÉTÉ: tl;dr Si vous ne vous attendez pas à recevoir des messages provenant d'autres sites, ne pas ajouter des écouteurs d'événement pour les messages d'événements, toujours vérifier l'identité des expéditeurs, et Toujours spécifier une cible exacte de l'origine, de ne pas *, lorsque vous utilisez postMessage pour envoyer des données à d'autres fenêtres.
    InformationsquelleAutor Robert Benyi
  3. -1
    function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

    Une autre manière, en utilisant des Javascript

    document.getElementById("ifr").height= "500px";
document.getElementById("ifr").width= "500px";

    DÉMO JSFIDDLE

    InformationsquelleAutor Vaibs_Cool