Iframe non attiva l'evento di ridimensionamento

Dopo 3 giorni di ricerche e tentativi ed errori, non sono in grado di ottenere l'iframe né il suo contenuto per attivare un evento di ridimensionamento in modo che venga richiamata la funzione di ridimensionamento. Se uso ... trigger ("ridimensiona"); per attivare manualmente un evento di ridimensionamento, la mia funzione di ridimensionamento viene chiamata e funziona. La pagina caricata nell'iframe si trova sullo stesso dominio (http://localhost:81/curlExample/) come pagina contenente l'iframe. Alla fine, la pagina nell'iframe sarà fornita dal metodo php curl, ma mi piacerebbe farlo funzionare prima.Iframe non attiva l'evento di ridimensionamento

******* Aggiornato ******** Come si attiva l'evento di ridimensionamento quando ridimensiono la finestra del browser che fa sì che l'iframe aggiusti la sua dimensione?

Grazie per il vostro aiuto!

pagina con l'iframe

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    
 
    function setResize() 
 
    { 
 
     window.alert("Hello"); 
 
     
 
     var iframeRef = document.getElementById('displayframe'); 
 
     $(iframeRef).on("resize", function(){ 
 
      var xExp = 0; 
 
      window.alert("Resize event fired."); 
 
      
 
     }); 
 
    } 
 
    
 
    $('#displayframe').load(function() 
 
    { 
 
     alert("Hello from iFrame. Load event fired."); 
 
     var myStallTime = setTimeout(setResize, 3000); 
 

 
    }); 
 

 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<p id="myP">Hello</p> 
 

 
<iframe id="displayframe" src="http://localhost:81/curlExample/HelloIframe.xhtml" style="height:250px; width:100%;"> 
 
    <p>Your browser does not support iframes.</p> 
 
</iframe> 
 

 
</body> 
 
</html>

pagina all'interno del iframe (HelloIframe.xhtml)

<?xml version="1.0" encoding="UTF-8"?> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
     <title>TODO supply a title</title> 
 
    </head> 
 
    <body> 
 
     <div id="myContent" style="width:100%; height:200px;"> 
 
      <h1>TODO write content</h1> 
 
      <h2>Extremity sweetness difficult behaviour he of</h2> 
 

 
      <p>Agreed joy vanity regret met may ladies oppose who. Mile fail as left as hard eyes. Meet made call in mean four year it to. Prospect so branched wondered sensible of up. For gay consisted resolving pronounce sportsman saw discovery not. Northward or household as conveying we earnestly believing. No in up contrasted discretion inhabiting excellence. Entreaties we collecting unpleasant at everything conviction.</p> 
 

 
      <p>Yet remarkably appearance get him his projection. Diverted endeavor bed peculiar men the not desirous. Acuteness abilities ask can offending furnished fulfilled sex. Warrant fifteen exposed ye at mistake. Blush since so in noisy still built up an again. As young ye hopes no he place means. Partiality diminution gay yet entreaties admiration. In mr it he mention perhaps attempt pointed suppose. Unknown ye chamber of warrant of norland arrived.</p> 
 

 
     </div> 
 
    </body> 
 
</html>

fonte

2015-01-08 ermSO

Ehm, perché non stai ascoltando il ridimensionamento nella finestra corrente? – epascarello

Non esattamente quello che è o non funziona o quali sono gli obiettivi, o cosa ci si aspetta da questo 'ridimensionamento' – charlietfl

L'elemento sarà mai innescare un evento di ridimensionamento, come un <img> o r a <div>. Devi ottenere questo evento da window. Poiché il tuo documento iframed proviene dalla stessa origine del documento principale, puoi accedere al suo contentWindow ea qualsiasi altro attributo.

Quindi, provate questo:

var iframeWin = document.getElementById('displayframe').contentWindow; 
$(iframeWin).on('resize', function(){ ... });

ho fatto useing solo DOM di addEventListener.

var iframeWin = document.getElementById('displayframe').contentWindow; 
iframeWin.addEventListener('resize', function(){ ... });

fonte

2015-01-08 18:06:53 Aurium

2 anni più tardi e ora abbiamo Resize Observer nel browser che ti consentirà di guardare gli eventi di ridimensionamento individuali elementi https://developers.google.com/web/updates/2016/10/resizeobserver – wesbos

Iframe non attiva l'evento di ridimensionamento

risposta

Problemi correlati