redimensionnement iframe inter-domaines


85

Comment redimensionner un iframe d'un autre domaine

-Éditer

Faites défiler vers le bas pour trouver des solutions ... ou lisez comment NE PAS faire cela: D

Après de nombreuses heures de piratage de code, la conclusion est que tout ce qui se trouve à l'intérieur de l'iframe n'est pas accessible, même les barres de défilement qui s'affichent sur mon domaine. J'ai essayé de nombreuses techniques en vain.

Pour gagner du temps, n'empruntez même pas cette voie, utilisez simplement sendMessages pour les communications interdomaines. Il y a des plug-ins pour HTML <5 que j'utilise - Allez en bas pour un bel exemple :)


Depuis quelques jours, j'ai essayé d'intégrer une iframe dans un site. C'est une solution à court terme pendant que l'autre côté développe et API (cela pourrait prendre des mois ...) Et parce que c'est une solution à court terme, nous voulons utiliser easyXDM - j'ai accès à l'autre domaine mais c'est déjà assez difficile de leur demander de ajouter l'en-tête p3p tel quel .....

3 iframes

La solution la plus proche que j'ai trouvée était les 3 iframes - mais cela devient mental de chrome et de safari, donc je ne peux pas l'utiliser.

ouvert en chrome

http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179

Mesurer les barres de défilement

J'ai trouvé un autre article sur la façon d'utiliser la hauteur de défilement pour essayer de redimensionner le formulaire .. en théorie, cela fonctionne bien mais je ne pouvais pas l'appliquer correctement en utilisant la hauteur de défilement des iframes.

document.body.scrollHeight

Cela utilise évidemment la hauteur du corps (impossible d'accéder à ces propriétés à 100% est basé sur l'affichage canvaz des clients et non sur la hauteur du document x-domaines)

J'ai essayé d'utiliser jquery pour obtenir la hauteur des iframes

$('#frameId').Height()

$('#frameId').clientHeight

$('#frameId').scrollHeight

renvoyer des valeurs différentes dans chrome et ie - ou tout simplement n'ont aucun sens. Le problème est que tout ce qui se trouve à l'intérieur du cadre est refusé - même la barre de défilement ...

Styles calculés

Mais si j'inspecte un élément dans le chrome de l'iframe, il me montre les dimensions des documents à l'intérieur de l'iframe (en utilisant jquery x-domain pour obtenir iframe.heigh - accès refusé) Il n'y a rien dans le CSS calculé entrez la description de l'image ici

Maintenant, comment Chrome calcule-t-il cela? (edit-browser re-rend la page en utilisant son moteur de rendu intégré pour calculer tous ces paramètres - mais ne sont attachés nulle part pour éviter la fraude inter-domaines .. donc ..)

HTML4

J'ai lu la spécification de HTML4.x et il y est dit qu'il devrait y avoir des valeurs en lecture seule exposées via document.element mais son accès est refusé via jquery

Cadre proxy

J'ai emprunté la voie consistant à renvoyer le site par proxy et à calculer ce qui est OK ... jusqu'à ce qu'un utilisateur se connecte via l'iframe et que le proxy obtienne une page de connexion au lieu du contenu réel. Aussi pour certains appeler la page deux fois n'est pas acceptable

http://www.codeproject.com/KB/aspnet/asproxy.aspx

http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/

Rendre la page

Je ne suis pas allé jusque-là, mais il existe des moteurs jscript qui regardent la source et re-rendent la page en fonction du fichier source. mais cela exigerait le piratage de ces jscripts .. et ce n'est pas une situation idéale pour les entités commerciales ... et certaines applets java purs ou le rendu côté serveur

http://en.wikipedia.org/wiki/Server-side_JavaScript

http://htmlunit.sourceforge.net/ <-java pas jscript

http://maxq.tigris.org/


MODIFIER LA MISE À JOUR 09-2013

Tout cela peut être fait avec des sockets HTML5. Mais easyXDM est une excellente solution de secours pour les pages de plainte non HTML5.

Solution 1 Très bonne solution!

Utilisation d'easyXDM

Sur votre serveur, vous configurez une page sous la forme de

<html>
<head>
<script src="scripts/easyXDM.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">

    var transport = new easyXDM.Socket(/** The configuration */{
    remote: "http://www.OTHERDOMAIN.com/resize_intermediate.html?url=testpages/resized_iframe_1.html",

    //ID of the element to attach the inline frame to
    container: "embedded",
    onMessage: function (message, origin) {
        var settings = message.split(",");
        //Use jquery on a masterpage.
        //$('iframe').height(settings[0]);
        //$('iframe').width(settings[1]);

        //The normal solution without jquery if not using any complex pages (default)
        this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
        this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
    }
});

</script>

</head>

<body>
    <div id="embedded"></div>
</body>

et sur le domaine des appelants, il leur suffit d'ajouter le html intermiedate_frame et easyXDM.js au même endroit. Comme un dossier parent - alors vous pouvez accéder aux répertoires relatifs ou à un dossier contenu rien que pour vous.

OPTION 1

Si vous ne voulez pas ajouter de scripts à toutes les pages, regardez l'option 2!

Ensuite, ils peuvent simplement ajouter un simple jscript à la fin de chacune des pages dont vous avez besoin pour le redimensionnement. Pas besoin d'inclure easyxdm dans chacune de ces pages.

 <script type="text/javascript">
            window.onload = function(){ parent.socket.postMessage( (parseInt(document.body.clientHeight)) + "," + ( document.body.clientWidth ) );  };
        </script>

J'ai modifié les paramètres qu'il envoie. Si vous voulez que la largeur fonctionne correctement, les pages de l'autre domaine doivent inclure la largeur de la page dans un style qui ressemble à quelque chose de similaire à:

<style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                background-color: rgb(75,0,85);
                color:white;
                width:660px
            }
            a {
            color:white;
            visited:white;
            }
        </style>

Cela fonctionne très bien pour moi. Si la largeur n'est pas incluse, alors le cadre se comporte un peu bizarrement et kind'of essaie de deviner ce qu'il devrait être .. et ne rétrécira pas si vous en avez besoin.

OPTION 2

Modifier le cadre intermédiaire pour interroger les modifications

Votre cadre intermédiaire doit ressembler à ceci.

    <!doctype html>
<html>
    <head>

        <title>Frame</title>
        <script type="text/javascript" src="easyXDM.js">
        </script>
        <script type="text/javascript">
            var iframe;
            var socket = new easyXDM.Socket({
                //This is a fallback- not needed in many cases
                swf: "easyxdm.swf",
                onReady: function(){
                    iframe = document.createElement("iframe");
                    iframe.frameBorder = 0;
                    document.body.appendChild(iframe);
                    iframe.src = "THE HOST FRAME";
            iframe.onchange = messageBack();

                },
                onMessage: function(url, origin){
                    iframe.src = url;
                }
            });

            //Probe child.frame for dimensions.
            function messageBack(){
                socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth); 
            };

            //Poll for changes on children every 500ms.
            setInterval("messageBack()",500); 

        </script>
        <style type="text/css">
            html, body {
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;
            }

            iframe {
                width: 100%;
                height: 100%;
                border: 0px;
            }
        </style>
    </head>
    <body>

    </body>
</html>

L'intervalle pourrait être rendu plus efficace pour vérifier si la taille a changé et envoyer uniquement si les dimensions changent avant de publier un message toutes les 500 ms. Si vous implémentez cette vérification, vous pouvez modifier l'interrogation aussi bas que 50 ms! s'amuser


Travaillez sur tous les navigateurs et est rapide. Excellentes fonctionnalités de débogage !!

Excellent Work to  Sean Kinsey  who made the script!!!

Solution 2 (fonctionne mais pas super)

Donc, fondamentalement, si vous avez un accord mutuel avec l'autre domaine, vous pouvez ajouter une bibliothèque pour gérer sendmessage. Si vous n'avez aucun accès à l'autre domaine .. Continuez à chercher d'autres hacks - parce que je n'ai pas pu trouver ou justifier pleinement ceux que j'ai trouvés.

Donc, l'autre domaine les inclura dans la balise Head

<script src="scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.postmessage.min.js" type="text/javascript"></script>
<script src="scripts/club.js" type="text/javascript"></script>

Dans le club.js, il y a juste quelques appels personnalisés que j'ai faits pour redimensionner les appels et contient ..

 $(document).ready(function () {   
    var parent_url = decodeURIComponent( document.location.hash.replace( /^#/, '' ) ),link;
//Add source url hash to each url to authorise callback when navigating inside the frame.Without this clicking any links will break the communication and no messages will be received
$('a[href]').each(function(){ 
     this.href = this.href + document.location.hash ;
});
//Get the dimensions and send back to calling page.
var h1 = document.body.scrollHeight;
var w1 = document.body.scrollWidth;
$.postMessage({ if_height: h1, if_width: w1 }, parent_url, parent );
  });

Et votre page fera tout le travail acharné et a un joli script ...

  //This is almost like request.querystring used to get the iframe data
  function querySt(param, e) {
         gy = e.split("&");
         for (i = 0; i < gy.length; i++) {
             ft = gy[i].split("=");
             if (ft[0] == param) {
                 return ft[1];
             }
         }
     }


     $(function () {
         // Keep track of the iframe dimensions.
         var if_height;
         var if_width;
         // Pass the parent page URL into the Iframe in a meaningful way (this URL could be
         // passed via query string or hard coded into the child page, it depends on your needs).
         src = 'http://www.OTHERDOAMIN.co.uk/OTHERSTARTPAGE.htm' + '#' + encodeURIComponent(document.location.href),
         // Append the Iframe into the DOM.
         iframe = $('<iframe " src="' + src + '" width="100%" height="100%" scrolling="no" frameborder="0"><\/iframe>').appendTo('#iframe');

         // Setup a callback to handle the dispatched MessageEvent event. In cases where
         // window.postMessage is supported, the passed event will have .data, .origin and
         // .source properties. Otherwise, this will only have the .data property.
         $.receiveMessage(function (e) {
             // Get the height from the passsed data.
             //var h = Number(e.data.replace(/.*if_height=(\d+)(?:&|$)/, '$1'));
             var h = querySt("if_height", e.data);
             var w = querySt("if_width", e.data);


             if (!isNaN(h) && h > 0 && h !== if_height) {
                 // Height has changed, update the iframe.
                 iframe.height(if_height = h);
             }
             if (!isNaN(w) && w > 0 && w !== if_width) {
                 // Height has changed, update the iframe.
                 iframe.width(if_width = w);
             }
             //For debugging only really- can remove the next line if you want
             $('body').prepend("Recieved" + h + "hX" + w + "w .. ");
             // An optional origin URL (Ignored where window.postMessage is unsupported).
           //Here you must put the other domain.com name only! This is like an authentication to prevent spoofing and xss attacks! 
         }, 'http://www.OTHERDOMAIN.co.uk');
     });

OPTION 3

Il s'agit maintenant d'une petite bibliothèque JS pour gérer le redimensionnement des iFrames inter-domaines, il faut toujours que l'iFrame contienne un peu de JavaScript, cependant, il ne s'agit que de 2,8k (765 octets gzippés) de JS natif qui n'a pas de dépendances et il ne fait rien tant qu'il n'est pas appelé par la page parent. Cela signifie que c'est un bon invité sur d'autres systèmes de personnes.

Ce code utilise mutationObserver pour détecter les changements DOM et recherche également les événements de redimensionnement, de sorte que l'iFrame reste dimensionné en fonction du contenu. Fonctionne dans IE8 +.

https://github.com/davidjbradshaw/iframe-resizer


4
l'exemple d'easyXDM a en fait beaucoup moins de code, ne repose pas sur des bibliothèques externes, et fonctionne également dans les navigateurs plus anciens :) Et oui, je suis partial puisque je suis l'auteur, mais quand même ..
Sean Kinsey

J'ai essayé easyXDM mais je ne pouvais pas faire fonctionner la navigation dans le cadre interne vers d'autres liens. J'ai cherché des exemples .. il y avait des liens qui sont cassés et la page d'exemple n'était pas trop claire .. Cela a fonctionné! et était ma réponse originale .. mais j'ai utilisé ceci. Pouvez-vous publier un moyen de navigation interne s'il vous plaît .. j'ai regardé et regardé ..
Piotr Kula

@ppumkin l' exemple fourni avec le téléchargement prend entièrement en charge la navigation interne. Le lien rompu est probablement lié à une expérience que j'ai faite, mais le serveur a été vidé à un moment donné ..
Sean Kinsey

1
Oui, j'ai regardé et regardé: D pour une raison quelconque, je ne pouvais pas le faire fonctionner avec mon site. Je vais réessayer.
Piotr Kula

1
Cela fonctionne - mais si je clique sur un lien sur ce domaine, il recharge la page - avec votre bibliothèque - mais je ne peux pas recevoir de message. Comment puis-je lui faire accepter les demandes, peu importe d'où elles viennent. Et à quoi sert ce easyxdm.swf? :)
Piotr Kula

Réponses:


10

Le fait est qu'il n'y a pas d'autre moyen que d'utiliser la messagerie inter-domaines pour cela, car vous devez obtenir la hauteur calculée d'un document dans un domaine à un document dans un domaine différent.

Donc, soit vous faites cela en utilisant postMessage(fonctionne dans tous les navigateurs modeurs), soit vous passez 5 minutes à adapter l' exemple d'iframe de redimensionnement d'easyXDM.

L'autre partie a juste besoin de copier quelques fichiers sur son domaine et d'ajouter une seule ligne de code à son document.


Au contraire mon ami. J'ai trouvé un moyen de redimensionner l'iframe d'une page croisée à la taille du document iframes et pas de barres de navigation. c'est un peu hacky mais poster plus tard .. c'est tellement simple c'est incroyable.
Piotr Kula

oui ... j'ai utilisé le plugin sendmessage jquwery - j'ai bien trouvé un autre hack - faux positif ..;) merci pour le bon conseil!
Piotr Kula

Eh bien, parfois, la meilleure chose à faire est d'écouter vos pairs - les chances que vous découvriez un hack magique que personne d'autre n'a est assez mince :)
Sean Kinsey

Imaginez si je le faisais - par pur hasard - ce serait fantastique. Mais oui- mince: D Merci
Piotr Kula

C'est vrai - si rien d'autre, vous avez au moins essayé, expérimenté et peut-être aussi appris quelque chose de nouveau :)
Sean Kinsey

25

Comme ce que Sean a mentionné, vous pouvez utiliser postMessage. J'ai passé tellement de temps à essayer différentes façons de redimensionner l'iframe avec cross-domain, mais pas de chance avant de tomber sur ce super article de blog de David Walsh: http://davidwalsh.name/window-iframe

C'est une combinaison de mon code et de la solution de David. Ma solution est spécifiquement orientée vers le redimensionnement des iframes.

Dans la page enfant, recherchez la hauteur de la page et transmettez-la à la page parente (qui contient l'iframe). Remplacez element_id par votre identifiant d'élément (html, body, peu importe).

<script>
function adjust_iframe_height(){
    var actual_height = document.getElementById('element_id).scrollHeight;
    parent.postMessage(actual_height,"*"); 
    //* allows this to post to any parent iframe regardless of domain
}
</script>

<body onload="adjust_iframe_height();"> 
//call the function above after the content of the child loads

Dans la fenêtre parente, ajoutez ce code. Remplacez iframe_id par votre identifiant iframe:

<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
  document.getElementById('iframe_id').height = e.data + 'px';
},false);
</script>

Si vous ouvrez la console, vous verrez la hauteur imprimée dans le journal de la console. Cela vous aidera dans le débogage, c'est pourquoi je l'ai laissé là.

Meilleur, Baker


Cela fonctionne très bien mais pas autant dans IE. J'ai dû envoyer 2 variables, mais IE n'acceptera pas les "données" si c'est un tableau ou un objet. Cependant, j'ai simplement créé des données comme data = var1 + "|" var2. Sur le parent, vous venez de diviser la chaîne sur | et récupérez vos 2 vars.
dbonneville

5

Après avoir recherché différentes solutions à cela, j'ai fini par écrire une petite bibliothèque simple pour tenir compte d'un certain nombre de cas d'utilisation différents. Comme j'avais besoin d'une solution prenant en charge les iFrames générés par plusieurs utilisateurs sur une page de portail, le navigateur pris en charge les redimensionnements et pouvait faire face au chargement JavaScript de la page hôte après l'iFrame. J'ajoute également la prise en charge du dimensionnement à la largeur et une fonction de rappel et autorise le remplacement de body.margin, car vous voudrez probablement que ce paramètre soit défini sur zéro.

https://github.com/davidjbradshaw/iframe-resizer

Le code iframe est juste un petit JavaScript autonome, ce qui en fait un bon invité sur les pages d'autres personnes.

Le script est ensuite initialisé sur la page hôte avec les options disponibles suivantes.

iFrameResize({
    log                    : true,  // For development
    autoResize             : true,  // Trigering resize on events in iFrame
    contentWindowBodyMargin: 8,     // Set the default browser body margin style (in px)
    doHeight               : true,  // Calculates dynamic height
    doWidth                : false, // Calculates dynamic width
    enablePublicMethods    : true,  // Enable methods within iframe hosted page 
    interval               : 32,    // interval in ms to recalculate body height, 0 to disable refreshing
    scrolling              : false, // Enable the scrollbars in the iFrame
    callback               : function(messageData){ // Callback fn when message is received
        $('p#callback').html(
            '<b>Frame ID:</b> '    + messageData.iframe.id +
            ' <b>Height:</b> '     + messageData.height +
            ' <b>Width:</b> '      + messageData.width + 
            ' <b>Event type:</b> ' + messageData.type
        );
    }
});

Gentil mec. Certainement quelque chose qui sera utilisé par beaucoup de gens! +1
Piotr Kula

1
que dois-je faire si je n'ai pas accès au domaine distant? Merci
Bala Peterson

@BalaPeterson, si vous ne pouvez pas accéder au domaine distant, vous ne pouvez pas le faire en raison des restrictions de sécurité dans le navigateur.
David Bradshaw

0

Au lieu d'utiliser scroll = no sur l'iframe, je le change en "auto". Ensuite, j'obtiens la taille de la fenêtre réelle

$(window).height();

et utilisez-le comme attribut de hauteur iframe.

Eh bien, le résultat est ...

Nous n'aurons jamais le scroll "page", seulement le scroll "iframe". Lorsque vous naviguez, peu importe qui est le parchemin, mais l'important est qu'il n'y en ait qu'un.

Eh bien, il y a le problème de l'utilisateur qui redimensionne simplement la fenêtre pendant qu'il navigue. Pour résoudre cela, j'utilise:

setInterval(getDocHeight, 1);

Pensiez-vous que cette solution causera des bugs? Cela fonctionne pour moi, et sur l'iFrame j'ai eu un contect dynamique généré par php. J'ai peur des bugs futurs avec ça ...


2
Bien sûr, le scroll "iframe" sera toujours de la même taille que la page. Ainsi, lors de la navigation, vous le voyez simplement comme il s'agissait du défilement "page".
Elton Morais

0

Aujourd'hui, je ne connais que 4 solutions:

Seul le troisième peut résoudre de nombreux problèmes. Par exemple, vous pouvez créer un iFrame réactif ; fermez-le de l'intérieur ou vous pouvez communiquer avec lui . Mais pour ce faire, vous avez besoin d'iFrame dans Iframe et de la solution de contournement «cookies tiers» (facultatif).

J'ai créé un article à ce sujet avec un exemple: iFrame inter-domaines piloté par les événements


0

Avez-vous examiné les attributs HTML5 «ajustement à l'objet»? Met à l'échelle la vidéo / images à l'iframe, plutôt que de mettre à l'échelle l'iframe (bien si vous prenez une image de taille moyenne qui finit par avoir une largeur de 5000 pixels). L'option «fit» (les autres sont «cover» et «fill») utilise une approche de type boîte aux lettres pour adapter la source tout en préservant les proportions. Pour la visualisation par le HTML5-less là-bas, il semble qu'il y ait beaucoup de polyfills disponibles. Celui-ci est génial, mais un bogue du côté d'Edge l'a rendu incompatible avec le nouveau cauchemar de Microsoft pendant environ un an, maintenant: https://github.com/anselmh/object-fit

EDIT: Pour contourner les problèmes interdomaines, vous pouvez toujours simplement faire le travail dans un script de contenu d'extension Chrome, car il pense que cela fait partie de la page sur laquelle vous collez votre iframe.


0

HTTPS un autre lien obtenir la hauteur de l'iframe autoheight

Contenu https://-a.com :

 <!DOCTYPE html>
    <html>
    <head>
        <title>Test Page</title>
    </head>
    <body>
        Test Page:
        <hr/>
        <iframe id="iframe" src="https://-b.com" style="width:100%;min-height:600px;border:none;" scrolling="no" ></iframe>
        <script>
        // browser compatibility: get method for event 
        // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8)
        var myEventMethod = 
            window.addEventListener ? "addEventListener" : "attachEvent";
        // create event listener
        var myEventListener = window[myEventMethod];
        // browser compatibility: attach event uses onmessage
        var myEventMessage = 
            myEventMethod == "attachEvent" ? "onmessage" : "message";
        // register callback function on incoming message
        myEventListener(myEventMessage, function (e) {
            // we will get a string (better browser support) and validate
            // if it is an int - set the height of the iframe #my-iframe-id
            if (e.data === parseInt(e.data)) 
                document.getElementById('iframe').height = e.data + "px";
        }, false);
        </script>
    </body>
    </html>

https://-b.com contenu iframe:

<!DOCTYPE html>
<html>
<head>
    <title>Test Iframe Content</title>
    <script type="text/javascript">
    // all content including images has been loaded
    window.onload = function() {
        // post our message to the parent
        window.parent.postMessage(
            // get height of the content
            document.body.scrollHeight
            // set target domain
            ,"*"
        )
    };
</script>
</head>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>3
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>4
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>5
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>6
</body>
</html>

Table de travail:

xcom http> ycom https TRAVAIL

xcom https> ycom https TRAVAIL

xcom http> ycom http TRAVAIL

xcom https> ycom http TRAVAIL

Capture d'écran de test de travail


-2

Cherchez-vous à trouver la hauteur de la page contenue dans l'iframe? J'ai fait fonctionner du javascript qui vérifie la hauteur du contenu iframe, puis définit la hauteur de l'iframe à la hauteur du contenu.

var Height = document.getElementById('iFrameId').contentWindow.document.body.scrollHeight;

document.getElementById('iFrameId').height = Height;

Cependant, cela ne fonctionne que si la page que vous affichez dans l'iframe est sur le même domaine. Si ce n'est pas le cas, vous ne pouvez pas accéder aux informations requises. Par conséquent, l'erreur d'accès refusé.


Oui, j'ai déjà essayé. Cela fonctionne très bien .. sur le même domaine comme vous l'avez dit .. Dites-moi, comment un navigateur sait-il ce que représente 100% lorsqu'il calcule initialement la hauteur? pourquoi ne pouvons-nous pas accéder à ces valeurs également? Chrome stocke cela dans des styles calculés pour chaque page de l'iframe, même x-domain ...
Piotr Kula

La hauteur est calculée en fonction du contenu et des attributs dont ils disposent. La hauteur d'un élément est incertaine tant que les enfants ne sont pas rendus.
MarioRicalde

comment puis-je obtenir les valeurs rendues alors? comme le fait l'inspection dans le chrome?
Piotr Kula

-1 car cela ne fonctionne pas entre domaines, ce qu'il a demandé.
Sean Kinsey

Vous ne pouvez pas obtenir les valeurs. L'inspecteur peut le faire car il a des autorisations de niveau «extension de navigateur» et non des autorisations de niveau «page Web avec une origine différente».
Quentin

-2

Pour redimensionner un iframe, voici un script simple:

cela va dans la tête: (cela a été écrit pour un script php, pour html, changez le 'en "et le \" en' ...

<script type='text/javascript'>
<!--
function resizeIframe(id){
/*
this.obj=obj
//this.obj.width=null
//this.obj.width=window.frames[\"sizeframe1\"].document.body.scrollWidth
this.obj.style.height=\"\" // for Firefox and Opera
setTimeout(\"this.obj.style.height=this.obj.contentWindow.document.body.scrollHeight+(notIE?heightOffset:0)\",10) // setTimeout required for Opera
*/

el=document.getElementById(id)
el.style.height='200px' // for Firefox and Opera
setTimeout('el.style.height=el.contentWindow.document.body.scrollHeight+\"px\"',1) // setTimeout required for Opera
}

// -->
</script>"

fin de tête

cela va dans le corps (rappelez-vous, ceci a été écrit pour un script php, pour html changez tous les 'en' et les '' en '...)

<iframe onload='resizeIframe(this.id)' allowTransparency=\"true\" name='ccpaymentwindow' id='sizeframe1' marginwidth='1' marginheight='1' height='700' width='690' border='0' frameborder='1' scrolling='no' src='ccmslink.php?variable1=" . $variable1 . "'></iframe>

bonus: il y a quelques indices ci-dessus. Comme il est configuré pour les scripts php, vous pouvez en faire beaucoup ... pour en savoir plus, faire plus ...

la clé pour cela est "sizeframe1" .... pour plusieurs "resizers" sur la même page, copiez le même script mais changez l'id dans iframe et le nom dans le script dans la tête, et alto! vous avez plusieurs redimensionneurs sur la même page ... cela fonctionne très bien!

avoir phun.


Je ne pense pas que vous répondez à la vraie question posée.
Andrew Barber

Oui, c'est du pur javascript pour redimensionner une iframe sur le même domaine. Il est beaucoup plus facile d'utiliser jQuery de toute façon. Cela ne fonctionnera pas entre les sites et il n'y a rien d'extraordinaire ici qui le permettra. Et il n'y a pas de script php?!
Piotr Kula
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.