无法加载iFrame CSS [英] Can't load iFrame CSS

问题描述

我正在尝试加载iFrame 到Wordpress网站。
iFrame应加载中显示的表格这个链接，应用了所有颜色和其他样式。

I'm trying to load an iFrame into a Wordpress website. The iFrame should load the table displayed in this link, with all the colors and other styles applied.

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

However, when I insert the iFrame on my website, it will load the content of the table but not the CSS.

这就是我试图'强制'的方式加载正确的CSS，因为我怀疑Wordpress主题覆盖了表CSS：

This is how I tried to 'force' load the right CSS, as I suspect the Wordpress theme is overriding the 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>

我做错了什么？
这是我的网站页面，其中插入iframe（滚动到底部）。

What am I doing wrong? This is my website page where the iframe is inserted (scroll to the bottom).

推荐答案

首先，iframe不会采用外部css。因为他们有自己的html头部和身体标签，它是一个单独的HTML文档。你不能覆盖Iframe中的任何样式。相反，您可以尝试在所需文档中附加样式表并在iframe中使用它。

First of all Iframes will not take the external css. as they have there own html head and body tags, Its a separate html document. you cannot override any styles in Iframe. instead you can try attach your stylesheet in the required document and use it in the iframe.

这篇关于无法加载iFrame CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！