3

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.

However, when I insert the iFrame on my website, it will load the content of the table but not the 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>

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

Improve this question

2 Answers 2

Reset to default
1

Use HTTPS to serve your css in the iframe. If you open the Chrome Devtools, the following error message can be seen multiple times: Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yes, this should be the reason, trying now, will let you know
1

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.

Improve this answer

1 Comment

Oh thank you for the clarification on the override doubt I had. However I'm pretty confident the root issue is the fact the CSS I'm trying to import doesn't use HTTPS, will try to fix this and will update soon

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.