-1

I have two seperate sites. On site B I would like to put an I frame of site A, but I am trying to customise the CSS in the iframe.

Is it possible to use CSS tags like the following?

iframe html {}
iframe body {}
iframe h1{}
etc

If not how can I customise site A when it is in an iframe? Thanks

Jay Williams
  • 77
  • 6
  • 1
    Does this answer your question? [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – Viira Sep 30 '21 at 12:57
  • Hi @viira. Immediately upon doing frames['name'] "Unsafe JavaScript attempt to access frame with URL, domains, protocols and ports must match. Taken from the answer in your link that only works if its the same domain being iframed. – Jay Williams Sep 30 '21 at 13:01
  • `A page inside an iframe is not allowed to access or modify the DOM of its parent and vice-versa unless both have the same origin. So putting it in a different way: document or script loaded from one origin is prevented from getting or setting properties of a document from another origin.` But there might be other workarounds. Refer here https://benohead.com/blog/2015/12/07/cross-document-communication-with-iframes/ – Viira Sep 30 '21 at 13:07

1 Answers1

0

Not sure if this is suitable for your use case, but since you have control of site A you could get it to test whether it was being called in an iframe through something like:

const isInIFrame = (window.location != window.parent.location) ? true : false;

and if it is then pick up the appropriate CSS.

A Haworth
  • 30,908
  • 4
  • 11
  • 14