IFrame，如何共享 css 文件答案

【问题标题】：IFrame, how to share css fileIFrame，如何共享 css 文件
【发布时间】：2012-05-24 18:17:07
【问题描述】：

我刚刚加入了一个使用 sap netweaver 生成网站的项目。

到目前为止，人们一直在单独开发他们的 DCP，因此我现在有 20 个 DCP 可以链接在一起并设计样式。

在根目录下，每个 DCP 都是一个 IView/IFrame。

我们目前有 20 个 css 文件，难以维护和快速更改，因此我希望使用 scss 生成 1 个 css 文件以使一切正常。

这部分工作正常，但是我遇到了一个问题，因为每个 IFrame 都会呈现自己，每个 IFrame 都会加载一个 css 文件，因此我会收到 20 次对新 css 文件的调用。

有没有办法在父视图和IFrame之间共享css文件，或者至少设置一下，让css文件下载一次，其他19个只使用缓存的版本？

干杯

杰森

【问题讨论】：

标签： css caching iframe

【解决方案1】：

<script type="text/javascript">
  $(document).ready(function() {
  //pulling all <style></style> css of parent document
  if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
            oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
 //pulling all external style css(<link href="css.css">) of parent document
    $("link[rel=stylesheet]",parent.document).each(function(){
        var cssLink = document.createElement("link")
        cssLink.href = "http://"+parent.document.domain+$(this).attr("href");
        cssLink .rel = "stylesheet";
        cssLink .type = "text/css";
        document.body.appendChild(cssLink);
    });   
  });
</script>

它可以继承外部样式表中定义的css以及父文档标签中定义的css。

【讨论】：

感谢您的回答，我在徘徊，您认为通过 js 复制 css 或从共享位置加载 css 文件更好？
最好从共享位置加载，因为万一你更新了css，就不用去js里找了。