如何使用 javascript 从父级向 iFrame 添加样式表？

Question

my JSFiddle: http://jsfiddle.net/gCRuk/1/

HTML:

My replays on SC-Replay.com:<br>
<iframe frameborder="0" name="frame" id="frame1" src="http://www.sc-replay.com/embedPlayer/21368-TheLindyHop.html" style="left: 0pt; position: relative; top: 0pt; width: 980px; height: 500px; border: 0px solid #00214E;" n="" vspace="0" marginheight="0" marginwidth="0" hspace="0" allowtransparency="true"></iframe>

Javascript:

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "http://www.lprestonsegoiii.com/WordPress/wp-content/themes/arjuna-x/style.css";

var iframe;
if(document.frames)
    iframe = document.frames["frame"];
else
    iframe = window.frames["frame"];
if(document.all)
    iframe.document.createStyleSheet(ss.href);
else
    iframe.document.getElementsByTagName("head")[0].appendChild(ss);

I followed this guide: http://www.geekdaily.net/2007/09/19/javascript-adding-a-stylesheet-to-an-iframe/

And I'm not really sure what is happening here / what is going wrong.

Answer 1

Generally speaking, you can't do that cross-domain due to JavaScript's Same Origin Policy .

It's possible if the iframe page, container page and the CSS file are all served from the same domain, which is what is assumed (but unfortunately not mentioned!) in the tutorial on GeekDaily .