Question

我有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应用于元素？

如果是这样，怎么样？感谢

Answer 1

在读取scrollHeight属性之前，您必须等到加载CSS文件。要实现它，您可以在调用appendChild之前向链接节点添加onload事件处理程序。

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

在帧上载后动态插入CSS（通过链接）

1 个答案: