动态插入的CSS(通过链接)在帧加载后应用

Dynamically inserted CSS (via link) applied after frame onload

本文关键字：加载 应用 链接 插入 CSS 动态      更新时间：2023-09-26

我有一个iframe，我在运行时填充src:

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

紧随其后:

    $(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');
    });

最后两行代码用于在我添加一些元素后调整框架的大小以适合其内容。

这是有效的，但问题是我动态添加的CSS调整了一些元素的大小，这意味着框架的高度又错了。

我是否需要链接动态CSS添加和框架的大小调整，以便CSS应用到元素之前，重新大小发生?

如果有，怎么做?由于

必须等到CSS文件加载后才能读取scrollHeight属性。为了实现它，你可以在调用appendChild之前向链接节点添加一个onload事件处理程序。

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