Firefox and IE displaying iframed text at different size. What feature can I detect to increase the size of the iframe?

Question

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.

Answer 1

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.