Use jQuery to Change CSS on iFrame Content

In this post, I have also included some documentation of failed attempts on trying to change the CSS of iframed content on a different domain. Also some information on how to change css in an iframe on same domain, which (as far as I know) can’t be done without a proxy pass or such.

Cross domain Efforts

How it works:

Compared URL	Outcome	Reason
http://www.example.com/dir/page.html	Success	Same protocol and host
http://www.example.com/dir2/other.html	Success	Same protocol and host
http://www.example.com:81/dir/other.html	Failure	Same protocol and host but different port
https://www.example.com/dir/other.html	Failure	Different protocol
http://en.example.com/dir/other.html	Failure	Different host
http://example.com/dir/other.html	Failure	Different host (exact match required)
http://v2.www.example.com/dir/other.html	Failure	Different host (exact match required)

Insert iFrame:




Ways to to change CSS in an iframe
Some of these work, and some don't but i've included both for you to ponder amd make up your own decisions.
This method didn't work for me.
[js]
var text = 'hi';
var content = "" + text + "";
var iframe = document.createElement("iframe");
iframe.src = ' document.body.appendChild(iframe);
var doc = iframe.document;
if(iframe.contentDocument)
doc = iframe.contentDocument; // For NS6
else if(iframe.contentWindow)
doc = iframe.contentWindow.document; // For IE5.5 and IE6
// Put the content in the iframe
doc.open();
doc.writeln(content);
doc.close();
doc.getElementsByTagName("body").style.backgroundColor = 'red';

This method didn’t work for me.


var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);

This method worked for me.


var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

This method worked for me.

var iframe = top.frames[name].document;

var css = ” +
‘

Frequently Asked Questions about Changing CSS in iFrame Content

Why can’t I change the CSS of an iFrame from a different domain?

This is due to the “Same-Origin Policy” which is a critical aspect of web security. It prevents a script from one page accessing or modifying the properties of another page from a different domain. This policy is implemented to prevent potentially malicious scripts from accessing sensitive data on another web page.

Is there any workaround to modify the CSS of a cross-domain iFrame?

Unfortunately, due to the security reasons mentioned above, there is no direct way to modify the CSS of a cross-domain iFrame. However, if you have control over the iFrame’s source page, you can add a script there to receive messages from the parent page and make the necessary changes.

How can I change the CSS of an iFrame if it’s from the same domain?

If the iFrame is from the same domain, you can directly access its content and modify the CSS using jQuery. Here’s a simple example:
$("#myIframe").contents().find("body").css("background-color", "red");
This will change the background color of the iFrame’s body to red.

Can I use JavaScript instead of jQuery to change the CSS of an iFrame?

Yes, you can use plain JavaScript to change the CSS of an iFrame. Here’s how you can do it:
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.backgroundColor = "red";
This will also change the background color of the iFrame’s body to red.

Why isn’t my CSS change reflecting in the iFrame?

There could be several reasons for this. The iFrame might be from a different domain, in which case you can’t modify its CSS due to the Same-Origin Policy. Or, the iFrame’s content might not have been fully loaded when you tried to change the CSS. To ensure the iFrame is fully loaded, you can use the load event.

Can I use the `postMessage` method to change the CSS of a cross-domain iFrame?

Yes, if you have control over the iFrame’s source page, you can use the postMessage method to send messages from the parent page to the iFrame, and add a listener in the iFrame’s page to receive the messages and make the necessary changes.

How can I ensure that my CSS changes are applied after the iFrame is fully loaded?

You can use the load event to ensure that the iFrame is fully loaded before you try to change its CSS. Here’s how you can do it with jQuery:
$("#myIframe").on("load", function() {
$(this).contents().find("body").css("background-color", "red");
});
This will change the background color of the iFrame’s body to red after the iFrame is fully loaded.

Can I change the CSS of an iFrame’s content if it’s a PDF?

No, you can’t change the CSS of a PDF file. CSS is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. PDF files have their own formatting and can’t be styled with CSS.

Can I use CSS to change the size of an iFrame?

Yes, you can use CSS to change the size of an iFrame. Here’s how you can do it:
iframe {
width: 500px;
height: 300px;
}
This will change the width and height of the iFrame to 500px and 300px respectively.

Can I use CSS to remove the border of an iFrame?

Yes, you can use CSS to remove the border of an iFrame. Here’s how you can do it:
iframe {
border: none;
}
This will remove the border of the iFrame.