0

what I'm trying to do is using an (external) html page within my page. Due to my page main color is black I want to change / inject the css of the iframe page. I'm not redistricted on the technology due to the page runs just local.

e.g. this page

should get a black background and a white font.

I tried a couple of ways. One idea is to read the html and replace e.g. the css file, but due to the mentioned page gets loaded dynamical via Javascript its not working (for me). Maybe this is a good approach? I'm open to other approaches as well...

flor1an
  • 960
  • 3
  • 15
  • 33
  • Possible duplicate of [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – tobiv Oct 11 '17 at 21:23

1 Answers1

0

This looks very similar to another post, so this link or this link might help. The gist is you might be able to send the parent's CSS to the child iframe via JavaScript like so:

window.onload = function() {
    Array.prototype.forEach.call(window.parent.document.querySelectorAll("link[rel=stylesheet]"), function(link) {
        var newLink = document.createElement("link");
        newLink.rel  = link.rel;
        newLink.href = link.href;
        document.head.appendChild(newLink);
    });
};
User 1058612
  • 3,739
  • 1
  • 27
  • 33
  • hmm I'm always getting `Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined at window.onload` – flor1an Oct 11 '17 at 21:50