Develop Reference

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.

How to add a div inside iframe?

I added an iframe in my webpage. I want to add a div inside of that iframe. But i have not been able to do so. If anyone can help me with this one, i would be very thankful.
The code that i used is given below.
`<div class="text-column">
<?php
$url="https://secure.activecarrot.com/public/facility/index/33/768";
?>
<iframe src="<?php echo($url); ?>" width="100%" height="1000px" frameborder="0"></iframe>
</div>`

You will need to use Javascript to inject the content into your iframe after the page has loaded: \
Create an <iframe> element and append html content to it with jQuery
However, be careful appending to an iframe: the third party using it probably expects to send and receive the same content, and injecting code into it may cause whatever function it performs to fail.
Edit: others have cited security concerns, and they are justoified. However, it is technically possible to do what OP hs requested.
You need to inject the content after the page has loaded because the iframe pulls and overwrites content on page load. If the iframe does not need to send anything back to the server at any point there is no reason you cannot add extra elements to an iframe. Every case is different.

I am afraid you will not be able to do this, since iframe is a way to inculde an external page (to put it simple), hence you can not alter pages in iframes.
Regards,
Spyros

Changing links to open outside an iframe from a Google Doc inside an iframe

I'm trying to have links from a Google Doc embedded inside an iframe to open outside the iframe. I've tried several solutions. I tried defining the base target to any of _parent, _top or _blank. Google Docs creates the code within the iframe, so I try changing it with jquery to change the target-attributes, but that doesn't seem to work.
The relevant html-code is:
<iframe id="googledoc" base target="_blank" scrolling=no width=1000 height=1000 src="https://docs.google.com/document/d/1ctn5fekV4odEepCREAfLg31PrNMGnmwqokY0wHXqu7s/pub?embedded=true">There was a problem fetching the frame.</iframe> <!-- scrolling=no is for backwards-compatibility, also implemented in css -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="../js/plugins.js"></script>
<script src="../js/iframefix.js"></script>
Note how base target is defined, but seems to have no effect.
The relevant jquery is in iframefix.js and is as follows:
$(document).ready(function () {
$('#googledoc').contents().find('a').each(function () {
$(this).attr('target', '_blank');
});
});
I found one solution working with php, but would rather not mess with php. Is there a solution using javascript/jquery?

Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
It seems you are trying to load google docs in iframe, so it is from other domain and no browser would allow you to access elements within it.
Few years back I wanted same thing and spent lots of time behind it. I came to know its not possible.
You might want to use pdf.js to display docs.
Look at this question for detail

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.

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.