Javascript function to load a CSS file in an iframe not hosted on my website

Question

I am using a service that creates a form that I load on my website within an iframe. I can put custom javascript to load inside the iframe when the form loads (I add the javascript in the form creator on the service's domain). I believe the function must use either both or one of the parameters "form" and "function". Like so:

function(field,form){
  code
}

Is there a function I can call so that it will load a css file from a different domain that will apply to the content inside of the iframe?

The domain in the iframe does load jQuery, but I'm not sure if it will allow me to call a jQuery function. If you give me a jQuery function, that would normally work inside of an iframe, I will test it out.

Answer 1

If you append a stylesheet link tag to the header, jQuery will handle creating and loading the stylesheet.

jQuery("head").append('<link rel="stylesheet" type="text/css" href="URL_TO_CSS_FILE" />');

Note that this does depend on your ability to add JavaScript that runs inside the iframe .

Answer 2

With jQuery you could simply inject a CSS tag in the head section of the page :

As soon as the tag is inserted, it will load the CSS