How to extend iFrame / move contents from iFrame to div?

Question

I have a group of links which load page contents to an iframe. That iframe has only height of the parent div and won't expand the page if needed, instead of it the iframe shows vertical scrollbar. I don't want the scrollbar there, I want the iframe to "expand" (that is impossible) -> move contents from iframe each time it loads to the parent div.
For Example: Welcome.html has height 2000px, but the window has only 900px and the iframe shows the scrollbar. I want the contents of Welcome.html to extend the page.

<a href="pages/welcome.html" target="ifrMain">Welcome</a>
<a href="anotherLongPage.html" target="ifrMain">Another page</a>
<div id="divMain"><iframe id="ifrMain" src="pages/welcome.html"></iframe></div>

I don't mind using jQuery. Something like "when the contents of iframe change, move them to the parent div."

It gives me: Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. Maybe the problem is I use local files on Chrome. EDIT: I uploaded it on the server and no error is shown, but the contents remain in stretched iframe with scrollbar — Manderius, May 06 '14 at 14:08
Are you running a server or just using local file on chrome? — A. Wolff, May 06 '14 at 14:09

score 3 · Answer 1 · answered May 06 '14 at 14:33

Ensure that you are working on server and the iframe you loading is with same protocol. below is the code for your question

Javascript to be included in the head of the page

<script type="text/javascript">
function getDocHeight(doc) {
    doc = doc || document;
    // stackoverflow.com/questions/...
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, 
    html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    console.log(ifrm)
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
    ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; // reset to minimal height ...
    // IE opt. for bing/msn needs a bit added or scrollbar appears
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}

</script>

HTML

 <iframe onload="setIframeHeight(this.id)" id="myframe" width="300" height="300" src="youpathtopagehere"></iframe>

You should call the functions on onload event only. otherwise it will not calculate height properly.

score 0 · Answer 2 · answered May 06 '14 at 14:00

It depends on various factors.

Internet Explorer 8 and higher (and other modern browsers) have the postMessage API. In the content of the iFrame, you run parent.postMessage(JSON.stringify({action: 'resize', height: 2000}, "*"); and in the parent (your page) you run -

$(window).bind(
 "message",
 function (e)
 {
  var data = JSON.parse(e.originalEvent.data);
  if (data.action === "resize")
  {
   // You must initialize iFrameElement first,
   // or just get it here using document.getElementById or something.
   iFrameElement.height = data.height;
  }
 });

If the iFrame shows a same origin content and you must support Internet Explorer 7, then give the iFrame a name attribute and the iFrame can call window.parent.document.getElementsByTagName(window.name)[0].height = 2000;.

It is more complicated if it is a cross origin content. Let me know if you need that (and you must control that cross origin content).

score 0 · Answer 3 · answered May 06 '14 at 14:21

You should just do

  function iframeLoaded() {
      var iFrameID = document.getElementById('ifMain');
      var wrapper = document.getElementById('wrapper');
      if(iFrameID) {
        $("#divMain").css("height", $(iFrameID.contentWindow.document).height()+"px");

      }   
  }

That works

How to extend iFrame / move contents from iFrame to div?

3 Answers3