无法加载iFrame CSS

时间:2018-10-29 11:18:46

标签: javascript html css iframe

我正在尝试将iFrame加载到Wordpress网站中。 iFrame应该加载以this link显示的表格,并应用所有颜色和其他样式。

但是,当我在网站上插入 iFrame 时,它会加载表格的内容,而不加载CSS 。

>

这是我试图“强制”加载正确的CSS的方式,因为我怀疑Wordpress主题将覆盖Table CSS:

<script language="javascript" type="text/javascript">
    function iFrameHeight() {
var h = 0;
if (!document.all) {
    h = document.getElementById('blockrandom').contentDocument.height;
    document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if (document.all) {
    h = document.frames('blockrandom').document.body.scrollHeight;
    document.all.blockrandom.style.height = h + 20 + 'px';
    var cssLink1 = document.createElement("link");
    cssLink1.href = "https://www.gscris.it/lmo/lmo-style.css";
    cssLink1.rel = "stylesheet";
    cssLink1.type = "text/css";
    frames['iframe'].document.head.appendChild(cssLink1);
    var cssLink2 = document.createElement("link");
    cssLink2.href = "https://www.gscris.it/lmo/lmo-style-nc.css";
    cssLink2.rel = "stylesheet";
    cssLink2.type = "text/css";
    frames['iframe'].document.head.appendChild(cssLink2);
    }
}
    </script>
    <div>Campioni d'amicizia</div>
        <iframe onload="iFrameHeight()" id="blockrandom" name="iframe" src="https://www.gscris.it/lmo/lmo.php?todo=&file=Piccamici201819.l98" width="100%" height="600" scrolling="no" align="top" frameborder="0">
    Questa scelta non funziona correttamente in quanto il browser utilizzato non supporta gli Inline Frames     </iframe>

我在做什么错? 这是我的website page插入iframe的位置(滚动到底部)。

2 个答案:

答案 0 :(得分:1)

使用HTTPS在iframe中提供CSS服务。如果您打开Chrome Devtools,则会多次看到以下错误消息:Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.

答案 1 :(得分:1)

首先,iframe不会使用外部CSS。因为它们有自己的html head和body标签,所以它是一个单独的html文档。您无法在iframe中覆盖任何样式。相反,您可以尝试将样式表附加到所需的文档中,然后在iframe中使用它。