Geek Answers Handbook

Iframe does not raise resize event

After 3 days of research and testing and errors, I cannot get the iframe or its contents to trigger a resize event, to invoke the resize function. If I use ... trigger ("resize"); To manually trigger the resize event, my resize function is called and works. The page loaded in the iframe is in the same domain ( http://localhost:81/curlExample/ ) as the page containing the iframe. In the end, the page in the iframe will be provided by the php curl method, but I would like it to work in the first place.

******* Updated ******** How do I get a resize event caused by a resize of a browser window that causes the iframe to resize it?

Thank you for your help!

Page with 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>

Page inside 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>
+8
javascript jquery event-handling resize iframe
source share
1 answer

The <iframe> element will never trigger a resize event, such as <img> or <div> . You should receive this event from window . Since your iframed document comes from the same origin of the original document, you can get its contentWindow and any other attributes.

So try the following:

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

I used this only DOM addEventListener .

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

More articles:


All Articles