I'm trying to get an IFrame inner HTML using below code.
<iframe src="http://www.msn.com"
width="100%" height="100%" marginwidth="0"
scrolling="no" frameborder="0" id="divInfo"
onreadystatechange="MyFunction(this);"></iframe>
JavaScript code is
function MyFunction(frameObj)
{
if (frameObj.readyState == "complete")
{
alert(frameObj.document.body.innerHTML);
}
}
But the alert shows me the html of current document. How can i get the inner HTML of iframe when the frmae ready state is complete.
If i use alert(frameObj.contentWindow.document.body.innerHTML); it gives me Access is denied error.
Thanks in advance.
Access is denied error is caused by the same origin policy.
Since your page is hosted on http://www.example.com/ (For example), if you try to access details on http://www.msn.com/, the browser won't let you since they are from 2 different domains.
However, if you are trying to access data from the same domain - Hosting page: http://www.example.com/index.html, IFrame's page: http://www.example.com/iframe.html, then you should be able to get the content.
For more information on the Same Origin Policy, here's a link: http://en.wikipedia.org/wiki/Same_origin_policy
BTW, you may want to use frameObject.contentDocument instead
<script type="text/javascript">
function documentIsReady(frameObject) {
alert(frameObject.contentDocument.body.innerHTML);
}
</script>
... and you can also use the onload instead of onreadystatechange...
<iframe src="iframe.html" onload="documentIsReady(this);"></iframe>
You can't read the contents of an <iframe> that has content from a different domain than that of the parent page.
You can only do that if it adheres to the same origin policy (meaning the iframe is at the same server as the parent document).
Anyway, this was answered here :)
As has been said previously, you cannot get the contents of an <iframe> if its source is not from the same origin.
This also applies to most other ways of getting external content, such as using ajax to load source code from another page. ie: $('#div').load('http://www.google.com');
To load external content, the content must comply with the same origin policy.
This means that the content must be on the same protocol and host.
Wikipedia Article Linked Above:
httpː//www.example.com/dir/page2.html --> Success Same protocol and host
httpː//www.example.com/dir2/other.html --> Success Same protocol and host
httpː//username:password#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)
Simply put, it must be on the same website. So while example.com/hello.html can load content from example.com/goodbye.html, it could not load content from google.com/content.html
Also, it must be on the same domain. Sub domains are considered to VOID the same domain policy so while weebly.com/hello.html can load content from weebly.com/goodbye.html, it could not load content from user1.weebly.com/content.html
There are of course workarounds, as usual, but that's another story all together. Actually, this is quite relevant to the question. So here is a wonderful questions 'thread' on all the ways to bypass it.
Related
I am experimenting with making a website where I have two iframes with other webpages side by side, and would only like to show a certain part of these websites.
Trying to edit the innerHTML of these websites throws errors regarding cross-page security problems.
How can I run Javascript inside these iFrames in a safe manner? If this is not possible, is there a good atlernative for iFrames where I can have to websites side-by-side?
It's not important for me to be able to edit both iFrames, only one of them need to be editable.
An iframe is just a 'hole' in your page that displays another web page inside of it. The contents of the iframe are not in any shape or form part of your parent page.
If your iframe is loaded from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.
Considering the iframe is from the same domain, Try using the below code and see if it works. The below code will add CSS changes to the iframe. If this works for you, then you can run javascript as well.
<script>
var iframe = document.getElementById("frame1");
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .lt{display:none;} </style>"));
});
</script>
If you are getting "permission denied type errors.", I think what you are doing is subject to the same-origin policy. This should be the reason why you are getting permission denied type errors.
Here you can check the possible solutions.
Unable to access iframe content (same-origin policy)
i am trying to edit content from iframe using jquery but nothing really seems to happen. Can anyone explain why please?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
<script>
$( "#frameDemo" ).contents().find( ".page-title" ).text('My html');
</script>
You cannot access or manipulate content from another domain in this way. This is blocked by something called the same-origin policy.
As the MDN page on this subject states, the same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It is a critical security mechanism for isolating potentially malicious scripts.
It is however possible to manipulate the HTML of an iframe that is on the same domain. You'd do that like this:
$("#frameid").contents().find("div").html('My html');
See here: Change HTML of an iFrame with jQuery?
I have a page with button and IFRAME. Inside IFRAME, I am loading a PDF file dynamically which is coming from different domain.
when I try to print file using the button action I am getting the following error.
Uncaught SecurityError: Blocked a frame with origin "http://localhost:8080" from accessing a frame with origin "http://www.cplusplus.com". Protocols, domains, and ports must match.
If I load the pdf file from my local system I am to print it .
I used the below code to print the iframe Pdf
var iframe = document.querySelector("#unofficialtranscript");
iframe.focus();
iframe.contentWindow.print();
Any idea how I can print the file which is loaded into the iframe which is on another domain .
I think you would need to have a look at the same origin policy.Javascript only calls a window or an iframe only if the policy is accepted.
You may need to use Postmessage API instead.
Please have a look here.
If both the parent DOM and child DOM (i.e., iframe) are from same domain then it will work fine.
If not, then use libraries like Porthole for cross-communication between different domains.
Demo site: http://sandbox.ternarylabs.com/porthole/
Note: You should have access to both the domains being used in your code.
I'm developing an application that is feed a URL containing a session token from an API. This URL will grant the user of the application the ability to view search results from 3rd party databases via the API.
The issue that I'm facing is that when presenting the results (The URL) in an iframe it looks very ugly due to the iframe's scroll bar. I've poked about got the usual Google results, but I'm finding I'm quite stumped as to how to expand the iframe's height to match the incoming content.
I found an example of exactly what I'd like to happen but on trying to replicate the code I'm having no luck.
The link in question ... As you can see the page loads an iframe into a basic HTML table and expands to accommodate the size of the content in the iframe.
Here's the source code for the HTML:
<html>
<body>
<table width="100%" border=1>
<tr><td>Header</td></tr>
<tr><td>Navigation</td></tr>
<tr><td>
<iframe onload="resize(this)" src="/test/phpinfo.php">
</iframe>
</td></tr>
<tr><td>footer</td></tr>
</table>
<script>
function resize(elem){
var outer=elem;
var inner=elem.contentDocument.documentElement;
outer.style.border="0";
outer.style.overflow="hidden";
outer.style.height=Number(inner.scrollHeight+10)+"px";
outer.style.width=Number(inner.scrollWidth+10)+"px";
}
</script>
</body>
</html>
Nothing special right? But copypasta of the code (obviously changing the src) does nothing. I feel like I'm taking crazy pills here, this should be 2 second job, but it's not working for me. This is all client side stuff, right? No voodoo magic happening on the server.
So ladies and gentlemen, what am I doing wrong, or how can I better do this? Please bear in mind that I have no ability to effect the HTML in the iframe as it is served up via an API and I can't touch it.
Thank you
EDIT : This is the reason it won't work Same Origin Policy.
you can only access the iframe contentDocument with javascript when iframe origin and the iframe src origin equal and matches each other.
otherwise the browser dont allow you to access the inner contentDocument
Blocked a frame with origin "http://example.de" from accessing
a frame with origin "http://otherorigin.example.de". Protocols,
domains, and ports must match.
your posted example page origin
http://frank.bridgewater.edu/test/iframeResize/
and iframe src origin
http://frank.bridgewater.edu/test/phpinfo.php
matches (equal origins). so here it is working and the script can access the iframe contentDocument
HI, i got a simple html page, localy with an iframe. the iframe includes a generated page which got a javascript function. i know want to call that function. of course, im getting "permission denied". so since im new to js and all that stuff i dont know if it's actually possible to do that. give me some hints for searching or a nice solution.
i do cal lthe func like: parent.myiframe.myfunc();
I guess the page in the iframe resides on another server / domain. Modern browser do not allow "cross site scripting", see: http://de.wikipedia.org/wiki/Cross-Site_Scripting
If possible, move the site in the iframe to the same server. An alternative (workaround) would be to proxy the page on the local server, so that that for the client it seems to be loaded from the same domain.
Edit: This is also called a "Same Origin Policy". You can only call java script functions in a document that is:
from the same domain (www.mydomain.com)
from the same subdomain (mail.mydomain.com <- no go!)
both use the same port (p.Ex.
accessing a http://... document from
a http*s*:// document won't work).
There might be another workaround if you have access to the iframe's source:
Change the iframe domain to the same as the outer frame's, by applying:
document.domain = "domain.com";
in the iframe source (see http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain for more information).
Also there is a Draft for "Cross-Origin Resource Sharing" (http://www.w3.org/TR/cors/) that is already partially implemented in several browser, see: http://www.webdavsystem.com/ajax/programming/cross_origin_requests