2

Any idea on how to automatically resize the height of an iframe based on its content.

The iframe source is coming from different domain.

Any thoughts on how to achieved it via Jquery or native JS?

Thanks

UPDATE: This script addressed my needs.

Drupal.behaviors.cnngomobile = function (context) {
    $(window).bind('load', function(){          
        var adsIframe = document.getElementById("303799");
        if (adsIframe) {
          var style = adsIframe.contentWindow.document.createElement("link");
          // create <link>
          var host = "http://"+location.host+"/sites/all/themes/cnngomobile/css/style-iframe.css";
          style.setAttribute("href", host);
          style.setAttribute("rel", "stylesheet");
          style.setAttribute("type", "text/css");
          // append
          adsIframe.contentWindow.document.head.appendChild(style);
        }
    });
  };

4 Answers 4

3

I have implemented automatic iframe resizing using the cross-domain messaging ability of HTML5's window.postMessage() API. Required reading: http://davidwalsh.name/window-postmessage, http://drupal.org/node/756722.

Example:

// "Sending" side (iframe)
Drupal.behaviors.yourIframeUpdateBehavior = {}
Drupal.behaviors.yourIframeUpdateBehavior.attach(context, settings) = {
  var data = {
    'bodyWidth':jQuery('body').width(),
    'bodyHeight':jQuery('body').height()
  }
  var domain = '*'; // Send to any domain.

  // Send current document dimensions to any parent of iframe
  parent.postMessage(data, domain);

  return false;
}

// "Receiving" side (iframe parent)
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
  $(window).bind('message', function(event) {
    var frameWidthPx = event.originalEvent.data.bodyWidth+'px';
    var frameHeightPx = event.originalEvent.data.bodyHeight+'px';
    $("#frame_id").width(frameWidthPx);
    $("#frame_id").height(frameHeightPx);
  });
});
// ]]></script>
0
1

But in the past i use this plugin http://www.lost-in-code.com/programming/jquery-auto-iframe-height/

4
  • The above link is useful if you have access in the source domain. :( Dec 6, 2011 at 6:58
  • My problem is I don't have an access in the source domain. Dec 6, 2011 at 6:58
  • 1
    Ahh i see, try with this: github.com/ternarylabs/porthole
    – Gnuget
    Dec 6, 2011 at 7:34
  • Any idea on how to apply this in Drupal assuming that my iframe is embed inside the node content? Thanks Dec 6, 2011 at 8:31
1

hmmn... aren't you able to set the width or height of the iframe using simple jquery like

$('iframe-id').width('xxxpx');
$('iframe-id').height('xxxpx');

or does the complication lie in the type of data you have in iframe and the logic to determine the width and height of the iframe...kindly elaborate...

1
  • @optimusprime619...the problem is the iframe source content is dynamic and it is coming from different domain. I don't have an access in the source domain also. Basically I want to set the height based on the body height inside the iframe. But it's a bit complicated for me to get the height from inside the iframe. Dec 6, 2011 at 6:57
0

Hello i like how it is down here- iframe toolbar

Actually i dont wat to add a toolbar thinking of it i just want to give my iframes which are in pages auto height. I dont understand how to implement the porthole. Actually just like ninja. Could anyone point us in the right direction?

Thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.