2015-07-28 16 views
8

Sto lavorando a questa pagina qui: http://factor1hosting.com/~dnaz/wordpress/certifications/IFrame Resizer non ridimensionamento

e sto cercando di tirare in un iframe cross domain.

Sto usando @DavidJBradshaw's iFrame Resizer per raggiungere questo obiettivo. Tuttavia, non riesco a far funzionare correttamente l'iframe.

posso usare solo la pianura javascript init:

<script>iFrameResize({log:true})</script>

E quando uso questo io capisco il registro, ma non viene ridimensionato. Ho anche provato il metodo di jQuery:

$('iframe').iFrameResize([{log: true}]);

e non si ottiene il registro o l'iframe ridimensionata. Ho anche provato a confezionarlo in un documento pronto e anche questo non lo consente.

Qualcuno ha qualche idea o idea sul perché questo non sta sparando correttamente? La mia console non sta lanciando errori JS ... Grazie!

MODIFICA: Ecco un esempio di come sono attualmente impostato sul lato HTML.

<iframe src="http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login" width="100%" scrolling="no"></iframe> 
       <script> 
        jQuery(document).ready(function() { 
         jQuery('iframe').iFrameResize([{log:true}]); 
        }); 
       </script> 

EDIT 2: Ecco il mio log della console quando lo fa il fuoco, ed è l'impostazione del iframe per 150px anche se il contenuto si estende più a lungo che poi.

[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 (http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login) 
iframeResizer.js:97 
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0 
iframeResizer.js:97 
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent) 
iframeResizer.js:97 
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent) 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] HTML & body height set to "auto" 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Enable public methods 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation Start 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation Iteration 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Animation End 
iframeResizer.contentWindow.js:62 . 
[iFrameSizer][iFrameResizer0] Added event listener: Device Orientation Change 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Transition End 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Added event listener: Window Clicked 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Enable MutationObserver 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] In page linking not enabled 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Trigger event lock on 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:150:703:init) 
iframeResizer.js:97 
[iFrameSizer][Host page] Received: 
[iFrameSizer]iFrameResizer0:150:703:init 
iframeResizer.js:97 [iFrameSizer][Host page] Checking connection is from: http://phpstack-9420-21004-48731.cloudwaysapps.com 
iframeResizer.js:97 
[iFrameSizer][Host page] Checking height is in range 0-Infinity 
iframeResizer.js:97 
[iFrameSizer][Host page] Checking width is in range 0-Infinity 
iframeResizer.js:97 
[iFrameSizer][Host page] Requesting animation frame 
iframeResizer.js:97 
[iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 150px 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Trigger event lock off 
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] -- 

risposta

10

Trovato!

L'altezza del corpo dell'iframe non veniva calcolata correttamente, quindi ho cambiato il modo in cui calcola l'altezza dell'iframe. Sto usando 'lowestElement' per raggiungere questo obiettivo e funziona benissimo.

iFrameResize({ 
    log      : true,     // Enable console logging 
    enablePublicMethods  : true,     // Enable methods within iframe hosted page 
    heightCalculationMethod : 'lowestElement', 
}); 

Dal repo GitHub: lowestElement Loops se ogni elemento del DOM e trova il punto più basso in basso

+1

ho avuto lo stesso problema. Ho solo aggiunto {heightCalculationMethod: 'max'} alla chiamata della funzione e questo ha risolto il problema. –

+0

@buschschwick sembra che tu non abbia bisogno di un coma dopo heightCalculationMethod – sk1llfull

+1

Un errore che stavo facendo era mettere il tag script sopra l'iframe - deve essere dopo l'iframe altrimenti non riesce a trovare l'iframe. – vanval

Problemi correlati