How to use iframe in parent html with parent styles?

Answer 1

As far as I know and according to my trials, its nearly impossible to edit anything in the iframe content. This is due to the security reasons of the website running in iframe.

There's some terms like cross-orgin, etc, which control how data moves in-out in iframe.

So, I dont think there's some straightforward way to do what you want.

So, if you want to apply your parent styles to the iframe website, then its not possible, according to me. May be there's some other method which I haven't come across.

[edit] Read this thread. https://www.google.com/url?sa=t&source=web&rct=j&url=https://stackoverflow.com/questions/19858217/how-to-apply-css-to-inner-iframe-element-through-parent-window-css-class%23:~:text%3DYou%2520can%2520not%2520directly%2520apply,IFrame%2520using%2520javascript%2520or%2520jquery.&ved=2ahUKEwjb677Ki7btAhUPzjgGHU4WBycQFjABegQIARAE&usg=AOvVaw0IbPAHGzSdT3D8wIZLVAYT

Answer 2

Amar Dahake
You can not directly apply styles to the inner IFrame element through parent window CSS class even though its domain is same as parent!

Though you can still access parent from within an iframe even though you can't access anything useful on it. This code will never cause an error even when crossing origins..

You can add entire CSS file instead of injecting separated styles by creating link and add it to the iframe’s head.

window.onload = function() {
let link = document.createElement("link");
link.href = "style.css"; /**** your CSS file ****/
link.rel = "stylesheet";
link.type = "text/css";
frames[0].document.head.appendChild(link); /**** 0 is an index of your iframe ****/
}

Hope helps