Is it possible to change the "href" of the <link rel="stylesheet"> of an iframe or even change the class/style an iframe element?

Question

I need to change the CSS of a iFrame, but researching here, I discovered that it is not so simple as, soon, I saw that the iFrame that I wish to stylize, has a <link rel="stylesheet" href="styles/report.css" /> and it is in this file report.css that are the stylizations that I would like to change, it is possible via JS I change this href and direct to my archive CSS?

If not, is there any way I can change the CSS of an element that is inside the iFrame? Changing by inspecting the browser element works, but logically, I would need something fixed. I thought of changing the class of the element with jQuery, but it didn’t work, I thought of overwriting the CSS of the element using CSS and the !important, but apparently it didn’t work either.

Answer 1

Iframe is not a normal element: it loads another page, which is only viewed in a parent page session. But apart from this "window" which is just for viewing, they are independent pages, as separate from each other as if they were in different tabs of the browser. And this is so on purpose, even for security reasons: imagine you have a page where the visible content is 100% an iframe, where you open a bank or e-commerce site. If the javascript on the outside page had access to the iframe data, you could capture any data typed in the forms inside - including passwords, card numbers, etc...

If you only need the textual information - and not Javascript running on the page inside the iframe, what you can do is to retrieve, through Javascript, the HTML content, with a GET request, mount the DOM of the target page, and copy the desired elements into your page - and then you apply the style you want. This is much more complicated, of course, and if the content of the page itself depends on javascript, it may not even be possible to do.

It’s interesting to remember that iframes and frames were elements invented in HTML before techniques like Ajax were possible, and even before dynamic content web applications were popular - Frames were a way to join static pages in HTML and re-use the top and left side of the page for navigation. Iframes remain a more or less popular way of putting another page inside a "mother" page, but they can do just that: insert the other page as a whole.

Answer 2

Try this, use this script after iframe has been loaded

$('link[href="Styles/report.css"]'). attr("href", "seucss.css");