0

I've checked out plenty of other questions but still no luck.

I'm working on my local machine in chrome.

I've got welcome.html (main page) and test.html (iframe page) then I have my style.css.

The Goal: Have my test.html as an iframe inside my welcome.html page. But have the iframe (test.html) be styled using jQuery.

So I have this in my welcome.html

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
var $head = $("iframe").contents().find("head");                
$head.append($("<link>", { rel: "stylesheet", href: "style.css", type: "text/css"     }));
});
</script>

and then this inside the body tag

<iframe name='iframe' id="iframe" src="test.html"></iframe>

iframe is working but no styles are being attached when I inspect the iframe.

thomasp423
  • 357
  • 8
  • 20
  • i think your code not work because the `jquery` can't access to another page head,i think you should do it with ajax -not sure- – Hamed mayahian Nov 08 '13 at 20:24
  • Possible duplicate: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Patrick M Nov 08 '13 at 20:26
  • I'm developing locally @PatrickM that thread didn't solve my issue. – thomasp423 Nov 08 '13 at 20:28
  • What are you using to develop? Just opening the files in a web browser? Do you have a server running? What browsers are you targeting? The simplest solution (and the only solution that will *always* work) is to just add the stylesheet to `test.html`. Anything more complicated is going to depend on implementation details - getting javascript working across iFrames is complicated and a security risk, so browsers have all sorts of guards against it. – Patrick M Nov 08 '13 at 20:32
  • Just locally no server. – thomasp423 Nov 08 '13 at 20:37

1 Answers1

0

I'm assuming you can't directly edit the iframe source? The simplest solution would be to just add the <link> tag there.

However, your real problem may be that it can't find the css file. The src attribute in the <link> tag needs to be relative to the location of the iframe. If the iframe is on some other domain, you'll need an absolute path (in your case maybe "http://localhost/whatever/style.css").

drsimonz
  • 562
  • 5
  • 8