Cross Domain set iframe height dynamically

Question

I have looked up many examples for cross domain iframe height but none of them were able to solve the issue.

I have an simple HTML given below. I want to resize the iframe inside it according to 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 Have tried

using a second javascript file added to the iframe to send a 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
}

The function for sending height is also added on the master page of the mywebapplication.

I have been following this example

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

The iframe contain a full fledged web application like a job portal — Tushar Narang, Oct 14 '15 at 04:45
Here is something interesting for you https://css-tricks.com/cross-domain-iframe-resizing/ — www139, Oct 14 '15 at 04:46
Or this other stackoverflow question http://stackoverflow.com/questions/22086722/resize-cross-domain-iframe-height — www139, Oct 14 '15 at 04:47
The moderator has marked it as duplicate. The question he marked as duplicate has no accepted answers great.. — Tushar Narang, Oct 14 '15 at 04:51
@Moderator : Before Markling it as duplicate. If u can just check the no of issues posted by the answer https://css-tricks.com/cross-domain-iframe-resizing/ — Tushar Narang, Oct 14 '15 at 05:03

MartinWebb · Answer 1 · 2017-03-26T23:42:35.850

-1

Although the question is in relation to solving an issue with the OP own personal code. Their is a tried and tested library can be used to solve the issue of resizing an iframe to the contents height. This library deals with cross domain and so I think it is worth mentioning.

https://davidjbradshaw.github.io/iframe-resizer/

you place two files one in the parent one in the 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 just add this file:

iframeResizer.contentWindow.min.js

The library takes care of the resizing and also cross domain. Check the docs.

edited Mar 26 '17 at 23:42

answered Mar 26 '17 at 23:17

MartinWebb

1,998
1
13
15

I dont know why my answer is down-voted the library does exactly what the OP is trying to do, yet it is a git repo tested and used. – MartinWebb Mar 26 '17 at 23:37
This library does not resolve the fact of resize a cross domain iframe – Fernando Torres May 12 '21 at 20:34

Cross Domain set iframe height dynamically

1 Answers1