Apply CSS to iframe - javascript

I add iframe from external site to mine like this:
<iframe src="http://site.com/page/"></iframe>
It has some own css and javascript files.
How can I add my own css styles to this iframe?

If the iframe source is not the same domain as your site, you can't add your own CSS to it due to same origin policy.

Are you trying to format the iframe border or its content? The latter isn't allowed for security reasons, the former can be archieved with a simple stylesheet (selector "iframe").

Related

How to apply css in iframe body content : Javascript

I used an iframe for some calculation like this.
<iframe id="iframe1" src="https://www.investwell.in/updation/parameter/Calculator/par_retirement_calculatorN.jsp?obgl=eeeeee&fs=14&ol=222222&obgr=dddddddd&or=111111&share=N" width="100%" height="900" frameborder="0" scrolling="auto"></iframe>
Now, i want to apply css to iframe content using Javascript but i'm unable to get this.
JS:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .panel-body{background: red !important;} </style>"));#000000';
});
Can anyone tell me where i'm going wrong here?
Any help will be appreciated.
Thanks in advance.
You can't do that with an iframe.
That would violate domain isolation (Same origin policy) and would be a massive security hole, as it would allow an attacker to modify portion of an arbitrary website after loading it.
Imagine what I could do if I could modify arbitrary form data after loading your bank's website in a "handy" iframe for you!
The only way to do this would be to replace the iframe with a div, and load the content via javascript with an ajax request (which you can only do if the other page is also on your domain, or the appropriate CORS headers are set). Of course this would require extensive restructuring of both websites, and more importantly it would require you to have the permission of the target website which I don't suppose you do.
Bear in mind that the same origin policy is in place exactly to prevent what you're trying to do, so there's no way around it.
I suggest you find another way to do whatever it is you're trying to do.
You can't, this is part of the Same origin policy
You cannot change the style of a page displayed in an iframe unless you have direct access and therefore ownership of the source html and/or css files.
This is to stop XSS (Cross Site Scripting)
You can apply CSS for iframe content. Follow below steps.
Create a Style Sheet according to your requirement.
Create below JavaScript function in the main page.
function myFunc() {
var iframe = document.getElementById('iframe');
var style = document.createElement('link');
style.href = "CSS.css";
style.rel = "stylesheet";
style.type = "text/css";
iframe.contentDocument.head.appendChild(style);
}
Call JavaScript function at onload event of iframe like below.
<iframe id="iframe" src="test.html" width="100%"></iframe>
Enjoy :)
It's not possible to do this through JavaScript.

Jquery - Change content styles iframe

I want to change styles css inside at a iframe, using:
$("#box_close").click(function(){
("#iframe").contents().find("#scrolling_box").removeClass("scrollingBox");
$("#iframe").contents().find("#scrolling_box").addClass("scrollingBoxCustom");
});
Not working ok because the attribute src is in different host that index file, so it gives a classic browser policy error when trying to access a resource that is not on the same host.
Is there some another way I can change styles from the html content of an iframe from a page hosted on another server?
Thanks,

overwrite css in iframe/ cross domain with access to other domain

I am working on a Project with an IFrame. Here is my question:
I want to take the css and Stylesheet from my Website into an iframe. The Content of the iframe is from another Domain, but I have full access to this Domain. The parentpage of the iframe has only simple html Content without any Stylesheet or css.
How can I make this work? Is it possible to write a script in both pages to adjust the css of the iframe?
Other questions and Solutions are about the same Domain or cross Domain without access to the parentpage of the iframe-content.
Thanks for the answers.
Marcel Mutz
Even if YOU have access to the other domain, that does not mean you can overcome the same-origin policy setup in the browser. You won't be able to change the styling in the iframe if the contents of that iframe originates in another domain.
More info from Mozilla

apply css to iframe(no control over this domian) using javascript

I have a website example.com and another website example1.com. i want to display example1.com as the iframe content in example.com site.
For example:
Include this in example.com <iframe src='http://example1.com'>
and add the jquery script in end of body in example.com. this is not working in cross domain. so any tweaks to this please
$(document).ready(function() {
$("#Frame").load(function(){
var timestamp = +(new Date());
$("#Frame").contents().find("head").append("<link href='http://xxxxxx.com/style.css?&apos;+ timestamp +&apos;' rel='stylesheet' type='text/css'/>");
});
});
so when the example1.com iframe loads in example.com the xxxxxx.com/style.css must be included in the header of example1.com iframe to change its css content
NOTE: I don't have control over example1.com which is the iframe content
The CMS i am using doesn't allow me access the server side. So manipulation can be done at the client side only. So solution like using proxy won't help.
I know about cross domian policy. but even some people do manipulate. thanks in advance
The only possibility would be to load the iframe content through a proxy of yours and modify the HTML content. You can not access iframes from another domain via JavaScript.
Reference
Reference2
Warning : This might not work as browsers implement and remove this feature more or less regularly.
One thing that you might do but which can break your website design (I would not recommend doing that unless you REALLY do not have any other choice) : use the seamless attribute on the iframe and enforce CSS styles with important on the elements you want modified.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe
I believe that it is really not that well supported, and I provide this information as a thing to try if every other failed.

Change iframe content css from the caller page of the iframe

Is it possible?
I want an make an adaptive layout but neither CSS or JS can force the iframe content to change from the calling page.
However the the iframe pages and the caller use the same CSS and JS file.
This is only possible, if they are from the same origin. It doesn't matter if both use the same CSS or JS file. That means, both are using the same domain name, application layer protocol, and (in most browsers) port number. (Same origin policy)
If you are sure that you fullfil the above mentioned requirements, please check the following links:
Adding a stylesheet to an iframe
How to apply CSS to iFrame?
How to load up CSS files using Javascript?

Categories

Resources