0

This question is especially for all the people who champion feature detection over browser detection.

I was previously using browser detection to change the size of an iframe that was cutting off part of the embedded page in firefox and ie, but now it doesn't work with ie 11.

I have a page from a different domain displayed as an i-frame. The only thing on the external page is formatted text. I set the height of the iframe based on what it takes in chrome for all the text to be framed perfectly. Safari and Opera work with the Chrome setting, but Firefox and IE display the iframed page larger than chrome causing part of the text to be cut off. I solved this using a function that changes the height if Firefox or IE was detected:

function changeHeight(divName) {
    var userAgent = navigator.userAgent.toLowerCase();
    var is_IE = userAgent.indexOf('msie') > -1;
    var is_firefox = userAgent.indexOf('firefox') > -1;

    if (is_IE) {
        document.getElementById('storyP').style.height = '67447px';
    }

    if (is_firefox) {
        document.getElementById('storyP').style.height = '67375px';
    }
}

This worked fine until IE changed its user agent string.

So I've decided to lend an ear to all the people who say don't detect browsers, detect features.

The problem: What feature?

I'm at a complete loss as to how to solve this problem using feature detection, if it's even possible.

Sam Hanley
  • 4,707
  • 7
  • 35
  • 63
user2856593
  • 97
  • 3
  • 11

1 Answers1

0

You need to have your javascript check the .scrollHeight property of the document inside the iframe,and then set the height iframe to that value.

That way, the size of the iframe will match the size of its content, even if the remote page gets changed at some time in the future.

Entoarox
  • 703
  • 4
  • 8
  • I tried to do that using this: function setHeight() { parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px'; } but nothing happened. Does it work for pages from a different domain? Edit: Sorry, I just realised that that isn't the same thing as what you suggested. I'll try your way and get back to you. – user2856593 Dec 23 '13 at 07:06
  • I can't get it to work with scroll height either. I don't know if it's the different domain or something else. Could you give me an example of how it's done? – user2856593 Dec 23 '13 at 07:33
  • @user2856593 you want a pure javascript or a library version, cause if you want pure javascript it'll take a while, as I'd have to brush up on the differences in implementations, havent had to use that area of js for a while so its gotten rusty. – Entoarox Dec 23 '13 at 18:48
  • Pure javascript is preferable. JQuery tends to make my web host freak out. – user2856593 Dec 23 '13 at 23:43
  • @user2856593 Do you control the content on both sides of the iframe? because if you do the resize script can be a whole lot easier. (less workarounds needed due to xss) – Entoarox Dec 24 '13 at 03:04
  • @user2856593 I'm having some issues creating a small enough version to serve as a proper example, for now, I'd suggest you look up the `postMessage` API, as that is a decent way to solve it (but requires a polyfill for older IE's) – Entoarox Dec 24 '13 at 07:00
  • I've tried postmessage as in this example http://kinsey.no/blog/index.php/2010/02/19/resizing-iframes-using-easyxdm/. It has no effect on the size of the iframe. I've also tried easy xdm but the iframe doesn't even show up. I'm using the free version of webs.com. Do you think the web host could be the problem? – user2856593 Dec 24 '13 at 11:19