By florianr on

Hello,

I am trying to use this script to adjust the height of an iframe on the fly: http://lib.mobius.tw/jquery/myplugin/iframe_autoHeight/api.htm

I have this js:

function doIframe(){
o = document.getElementsByTagName('iframe');
for(i=0;i<o.length;i++){
if (/\bautoHeight\b/.test(o[i].className)){
setHeight(o[i]);
addEvent(o[i],'load', doIframe);
}
}
}

function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}

function addEvent(obj, evType, fn){
if(obj.addEventListener)
{
obj.addEventListener(evType, fn,false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}

if (document.getElementById && document.createTextNode){
addEvent(window,'load', doIframe);
}

and this html file:

<html>
<head>
  <script type="text/javascript" src="/misc/jquery.js"></script>
  <script type="text/javascript" src="/autoHeight.js"></script>
</head>
<body>
  <p></p>
  <iframe src="http://www.google.de" class="autoHeight" name="iframe" frameborder="0" height="227"    scrolling="auto" width="900">
  </iframe>
</body>
</html>

The /autoHeight.js an /misc/jquery.js is reachable. The autoHeight.js and html file are on the Servers root.
But the height of the "google" iframe is only 227 and not autmatically adjusted.

Please help me, I am not familiar with JQuery, I am shure I miss an easy thing, but I have no Idea.

⋅ Categories: Drupal 5.x

Comments

gpk’s picture

gpk commented

I'm not very familiar with jQuery either (only used it once), but it looks as if you are using plain JavaScript rather than any of the jQuery stuff, i.e. jquery.js probably not needed.

Suggest you use the Firefox browser with Firebug plugin which lets you debug JS. Then you can step through the JS code and see what's happening. You will learn a lot!

Good luck,

gpk
----
www.alexoria.co.uk

gpk
----
www.alexoria.co.uk

randomuser’s picture

randomuser commented

Im having trouble with autoheight as well, trying to get it to open an iframe that is the correct size for content but its not happening. Im really not sure whats wrong so ill throw so out there for folk to shoot down.

1. Cross Domain restriction? I was under the impression that this was a solution to the cross-domain issue but maybe not?

2. autoHeight is a plugin for jquery, does it have to be added\installed\registered anywhere?

Firebug console has ....

[Exception... "'Component does not have requested interface' when calling method: [nsIInterfaceRequestor::getInterface]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "" data: no]

mean anything to anyone?

If this isnt the solution does anyone know how to resize the iframe so that the content fits?

Thanks.

gpk’s picture

gpk commented

autoHeight.js is not, as far as I can see, a jQuery plugin - it is plain javascript.

To reference the iframe element using jQuery you would use something like

$('iframe.autoHeight')

To add this to a page in Drupal you could do something like

  drupal_add_js(
    if (Drupal.jsEnabled) {
      $(document).ready(function() {
        $('iframe.autoHeight').height = <new_height>;
      });
    };
  );

I've not tested this but it may give you some ideas. Obviously you would need to calculate automatically. See this page http://drupal.org/node/121517 for further hints on jQuery in Drupal.

Notes:
1. here drupal_add_js() is being used to add JS directly into the page. You can also add a referenced JS file.
2. Drupal.jsEnabled checks that the browser properly supports the JS
3. $(document).ready(function() { - makes sure the document is properly loaded before trying to do anything with it

gpk
----
www.alexoria.co.uk

gpk
----
www.alexoria.co.uk

randomuser’s picture

randomuser commented

Hey, still nothing, i've used the above code as a starting point but everything I try doesnt resize the iframe. My javascript knowledge is extremely limited so will someone that knows whats what try to figure out why this won't work.

Does the autoheight code actually work? Is it definitely stand alone code?

gpk’s picture

gpk commented

OK previous attempt not quite right. If you have a page with PHP input format and content:

<iframe src="http://www.google.co.uk" class="autoHeight" frameborder="0" height="227" width="750" scrolling="auto"></iframe>

Then try embedding this PHP code also in the page:


$js = '
if (Drupal.jsEnabled) {
  $(document).ready(function() {
    $("iframe.autoHeight").height("500px");
  });
}
';

drupal_add_js($js, 'inline');

What the JS does is
- check if JS/jQuery supported
- wait till the document is ready
- set the height of the iframe to 500px (previously was 227) using the jQuery height method.

.height() with no argument returns the current value

To automatically calculate the correct height you could probalby just modify the code from the orginal setHeight() function ... something like this perhaps ought to work ...


$js = '
if (Drupal.jsEnabled) {
  $(document).ready(function() {
    var ifr = $("iframe.autoHeight").get(0) // get the original document element underlying the jQuery object
    if (ifr.contentDocument){
      ifr.height = ifr.contentDocument.body.offsetHeight + 35;
    }
    else {
      ifr.height = ifr.contentWindow.document.body.scrollHeight;
    }
  });
}
';

drupal_add_js($js, 'inline');

... but unfortunately doesn't. .get(0) gets the original document element underlying the jQuery object, but unfortunately DOM traversal seems to stop after .document - it's not possible to access any of its properties, on my PC/Ff at least :-(

Shame really 'cos it was looking so promising! Wishing you better luck than I'm having!

gpk
----
www.alexoria.co.uk

gpk
----
www.alexoria.co.uk

randomuser’s picture

randomuser commented

http://jbscdev.blogspot.com/2007/08/automatic-iframe-height-sizing-using...

I've been given this post where the author has just used the core jquery instead of using the 'plugin' above. I'm playing about with the code now but as I said before im terrible with javascript, so someone might want to try this as well.

Do we need the jquery noconflict thing?

florianr, out of curiosity, are you still looking for a solution to this?

gpk’s picture

gpk commented

>Do we need the jquery noconflict thing?
Don't think so but anything is worth a try! Using it means you have to use jQuery() instead of $.

The post by Jim B is basically a better version of what I was trying to piece together. May be worth trying it in a static page to see if something to do with Drupal is causing it not to work.

gpk
----
www.alexoria.co.uk

gpk
----
www.alexoria.co.uk

florianr’s picture

florianr commented

Yes I am still looking for a solution, but as far as I undesrtood it is an security issue, that I can't get the bodys height of an docuemtn on an other domain.
But if there is any solution I would be glad.

I was thinking about using a script on the remote document as well, but that leads away from the jquery solution ....

gpk’s picture

gpk commented

>it is an security issue, that I can't get the bodys height of an docuemtn on an other domain
Ah yes of course ...

Only way might be to get Drupal to act as a proxy using its built-in http client http://api.drupal.org/api/function/drupal_http_request/6 and then rewrite links in the output but sounds a bit of a nightmare and might not handle links implemented via JS, at least not without much blood, sweat and toil...

Maybe there's an easier way ..

gpk
----
www.alexoria.co.uk

gpk
----
www.alexoria.co.uk