All geek questions in one place

Cross-domain sets iframe height dynamically

I looked through many examples for the height of the cross-domain iframe, but none of them could solve the problem.

I have simple HTML below. I want to resize the iframe inside it to fit the height of the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body > <table width="780" height="406" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#333333" style="border:1"> <tr> <td valign="top"><table width="778" border="0" cellspacing="0" cellpadding="0"> </td> </tr> </table> <iframe src="http://mywebapplication.com" width="100%" ></iframe <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="53575f"> <tr> <td align="center" height="38"><span class="Footer">All Rights Reserved © ABC 2009-2012. </td> </tr> </table></td> </tr> </table> </body> </html>

What i tried

using the second javascript file added in the iframe to send postMessage back to the parent.

HTML page containing iframe

  <iframe src="http://mywebapplication.com" width="100%" id="zino_iframe"></iframe> <script type="text/javascript"> var zino_resize = function (event) { alert("sds"); var zino_iframe = document.getElementById('zino_iframe'); if (event.origin !== "http://hrcraft.noviavia.com") { return; } //alert(zino_iframe); if (zino_iframe) { alert(event.data); zino_iframe.style.height = event.data + "px"; } }; if (window.addEventListener) { window.addEventListener("message", zino_resize, false); } else if (window.attachEvent) { window.attachEvent("onmessage", zino_resize); } window.addEventListener("message", myListener, false); function myListener(event) { if (event.origin !== "http://hrcraft.noviavia.com") { return; } //do something }

A height submit function is also added on the mywebapplication main page.

I followed this example

http://zinoui.com/blog/cross-domain-iframe-resize

+5
source share
1 answer

Although the question is related to solving the problem with the OP's own personal code. Their tried and tested library can be used to solve the problem of resizing the iframe to the height of the content. This library deals with cross domain, so I think it's worth mentioning.

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

you put two files in parent in child (iframe)

in your parent:

 <style>iframe{width:100%}</style> <iframe src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe> <script>iFrameResize({log:true})</script>

In your child, you simply add this file:

iframeResizer.contentWindow.min.js

The library will take care of resizing as well as cross domain. Check documents.

0
source

Source: https://habr.com/ru/post/1233674/

More articles:


All Articles