CODEWITHSUNDEEP
javascripthtmlcssangularjsiframe
Wyren
Wyren

Reputation: 21

Problem with height adjustment of an <iframe> : scrollHeight returns 0

I'm working on a mailbox, i get a mail from a HTTP request and try to display it in a iframe, because it can be a plain text or HTML email.

There is no problem to display the content but i'm not able to adjust the height to that content. I always get a 0 from contentWindow.document.body.scrollHeight.

I tried to see if it comes from the fact that the mail could be in plain text, but it's the same thing for an html email.

I know that the content is displayed because i manually edited the page to change the height and show the content. The only problem right now is the auto adjustment of this height.

By the way, the iframe.contentWindow.document.body is an [Object HTMLBodyElement]

$scope.iFrameDisplayMail = function (Mail_content) {

    var iframe = document.getElementById('mail-display');
    if (Mail_content.html != null) {
      iframe.contentWindow.document.write(Mail_content.html);
    } else {
      iframe.contentWindow.document.write(Mail_content.plain);
    }
    iframe.style.width = 'auto';
    alert(iframe.contentWindow.document.body.scrollHeight);
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    iframe.contentWindow.document.close();  
}

There is no error in the console about this.

Upvotes: 2

Views: 4453

Answers (2)

LCH
LCH

Reputation: 16

I also had this problem and found this question while researching how to fix it. In case it might help someone else, here's how I got it to work:

TLDR: Try adding an empty <style></style> tag to the HTML content of the Email you want to display in the iFrame if it doesn't have one.

I set the HTML content for the iFrame using iFrame.contentWindow.document.write("Html-Content-From-Received-Email"). As for you, this content would be displayed (if I changed the height manually when troubleshooting), but the iFrame.contentWindow.document.body.scrollHeight returns 0, so I can't set my height correctly programmatically.

What I found is that this problem only occurred for HTML content that does not have a <style></style> tag - which is common for E-Mails, eg. sent from Thunderbird. When I added an empty <style></style> tag to the E-Mail-content I received (otherwise exactly the same), the correct scrollHeight was returned. So, for example, this E-Mail content would not work (scrollHeight=0):

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
  </body>
</html>

But when I add the <style></style> tag, it would work correctly and the correct scrollHeight would be returned:

<html>
  <head>
    <style></style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
    <p>Das ist ein Test.</p>
  </body>
</html>

I am not a web expert, so I can't explain why exactly this works, but it cost me quite some time to fix this issue and I hope the solution that worked for me also helps someone else.

Upvotes: 0

Dan Randolph
Dan Randolph

Reputation: 751

Based on your example, you can use:

var iframe = document.getElementById('mail-display');
var scrollHeight = iframe.ownerDocument.body.scrollHeight;

Upvotes: 3

Related Questions