Dynamically inserted CSS (via link) applied after frame onload

Question

I have an iframe that I populate the src of at runtime:

$(iframe).attr("src", "<my html page uri>");

Followed by:

    $(iframe).load(function() {
      //Copy style from parent
      if (setStyles) {
        setStyles = false;
        var linkTags = window.parent.document.head.getElementsByTagName("link");
        for (var i = 0; i < linkTags.length; i++) {
          if (linkTags[i].rel === "stylesheet") {
            var node = linkTags[i].cloneNode();
            node.href = linkTags[i].href;
            this.contentDocument.head.appendChild(node);
          }
        }
      }

      //add some elements dynamically

      var windowHeight = iframe.contentWindow.document.body.scrollHeight;
      $(iframe).height(windowHeight + 'px');
    });

The second last 2 lines of code are there to resize the frame to fit its content after I appended some elements.

This works, but the problem is the CSS that I dynamically added resizes some of the elements, and that means the frame is the wrong height again.

Do I need to chain the dynamic CSS addition and the resizing of the frame so that the CSS is applied to the elements before the re-size happens?

If so, how? Thanks

I think using a setTimeout with 100-200 milliseconds to resize the frame could help. I'm not exactly sure though.. — Noldor
– Noldor, Commented Aug 8, 2016 at 7:20

user6558785 · Accepted Answer · 2016-08-10 02:53:21Z

1

You have to wait until the CSS file is loaded before reading the scrollHeight property. To achive it, you can add an onload event handler to the link node before calling appendChild.

$(node).load(function() {
    var windowHeight = iframe.contentWindow.document.body.scrollHeight;
    $(iframe).height(windowHeight + 'px');
} ) ;
// Before this:
this.contentDocument.head.appendChild(node);

answered Aug 10, 2016 at 2:53

user6558785

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically inserted CSS (via link) applied after frame onload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related