How to apply css in iframe body content : Javascript - 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.

Related

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.

Stop an embedded iframe from redirecting

Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/
As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}​
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.
It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/
If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)

I want to load only the body of the (Live)source url in in Iframe

I am doing the task of the load only body tag of the source URL in Iframe.No other than it.
I have done following code for it.
one javascript function
Function test(){
var iframe=document.getElementById('test');
iframe.contentWindow.document.body.style.backgroundColor="green";
}
<iframe id="Iframe1" width="700" height="400" src="http://www.facebook.com" Onload=test()></iframe>
But no effect.
My actual task is to apply my custom css to that body tag only.
Please suggest any solution.
This won't work unless you explicitly switch off cross-domain scripting protection in your browser settings. You may try your luck with writing Greasemonkey Plugin.

How to apply a single line of CSS to an external iframe?

I have to include an external hosted iframe on a client's website, and I want to change the background-color of the body element.
I tried:
<script type="text/javascript">
function makeitblackgoddamnit(){
top.frames['bookings'].document.body.style.backgroundColor = "black";
}
</script>
<iframe src="http://www.booking.com/?
aid=123456&tmpl=searchbox&ss=&width=250&bgcolor=000000&textcolor=FFFFFF
&label=label"width="250px" style="margin-left:20px;border:none;" height="250px"
frameborder="none" scrolling="no" style="background-color:black;" name="bookings"
onload="javascript:makeitblackgoddamnit();">
</iframe>
but it doesn't work.
I also tried some other versions, but I don't want to load an external style sheet. I cannot use any JS libraries.
Can you help me?
You can't. Allowing access (read or write) to the DOM of remote websites would allow for all sorts of nasty attacks, so browsers don't.
The only way this is possible is if you can alter the CSS referenced inside the Client's website. Otherwise, there isn't much you can do to a cross-domain iFrame.
Iframes are subject to the same origin policy, you cannot interact with them using JavaScript (or CSS, iirc) unless the current and iframe domains match.
I'm having a similar problem, but the difference is that I'm not actually setting a source for the iframe I insert the html I want using jQuery. My problem is that I don't know how to include a style sheet to the iframe.
Check the code below:
<button id="print1" onclick=" $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); window.frames['frame1'].print();">Print full report</button>
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>

jQuery: How to manipulate the contents of an iframe when the src is a different domain?

I have an iframe loading a page, and I would like to manipulate the contents.
For example:
<iframe id="myIframe" src="http://www.google.com"></iframe>
<script>
$(document).ready(function(){
$(iframeContents).css('background-color', '#000');
});
</script>
How can I do this?
You can't. The Same Origin Policy forbids this.
As Pekka said, you can't, not directly. The JavaScript security model prohibits this. However, you can do it if the domain in the iFrame is the same as the one in which the script runs. So what can be done is to set up a proxy on your own domain, and show the content in the iFrame through the proxy and then use JS to interact with it.

Categories

Resources