Iframe nie wywołuje zdarzenia zmiany rozmiaru

Po 3 dniach badań i prób i błędów, nie jestem w stanie uzyskać ramki iframe ani jej zawartości, aby wywołać zdarzenie zmiany rozmiaru, aby wywołać funkcję zmiany rozmiaru. Jeśli użyję ... trigger ("resize"); aby ręcznie wywołać zdarzenie zmiany rozmiaru, moja funkcja zmiany rozmiaru jest wywoływana i działa. Strona załadowana w elemencie iframe znajduje się w tej samej domenie (http://localhost:81/curlExample/) jako strona zawierająca element iframe. Ostatecznie strona w iframe będzie dostarczona przez metodę php curl, ale chciałbym ją najpierw uruchomić.Iframe nie wywołuje zdarzenia zmiany rozmiaru

******* Zaktualizowany ******** Jak uzyskać wywołanie zmiany rozmiaru zdarzenia podczas zmiany rozmiaru okna przeglądarki, co powoduje, że element iframe dostosowuje swój rozmiar?

Dziękuję za pomoc!

Strona z 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>

strona w 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>

Źródło

2015-01-08 ermSO

Hm, dlaczego nie słuchasz zmiany rozmiaru w bieżącym oknie? – epascarello

Nie jestem dokładnie pewien, co jest lub nie działa lub jakie są cele lub czego oczekujesz od tego 'resize' – charlietfl

Element nie wywoła zdarzenie resize, jak <img> o r a <div>. Musisz uzyskać to wydarzenie od window. Ponieważ twój dokument z tekstem pochodzi z tego samego źródła dokumentu nadrzędnego, możesz uzyskać dostęp do jego contentWindow i innych atrybutów.

Więc spróbuj tego:

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

Zrobiłem to useing tylko Doma addEventListener.

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

Źródło

2015-01-08 18:06:53 Aurium

2 lata później, a teraz mamy funkcję zmiany rozmiaru obserwatora w przeglądarce, która pozwoli Ci oglądać zdarzenia zmiany rozmiaru na poszczególnych elementy https://developers.google.com/web/updates/2016/10/resizeobserver – wesbos

Iframe nie wywołuje zdarzenia zmiany rozmiaru

Odpowiedz

Powiązane problemy