We Keep Coding

Webpage with iFrames

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)

Determine if object/embed is forbidden?

You might know HN, but you maybe also do not like the fact of clicking around in many tabs/going back and forward. I thought about making some page on which both webpage and links from HN are. So I made this: http://goodfrontpage.com/direct
But there are 2 Problems:
First: How to determine if a page doesn't allow in it's http-headers to open it in something like this:
<iframe class="webpage" src="{{post.url}}" ></iframe>
or this:
<object class="webpage" data="http://asfasfasfa.com" >
<embed class="webpage" src="http://asfasffvasf.com" > </embed>
Error: Webpage not accessible!
</object>
This is true for pages like github.com, eff.org or youtube.com
Second: Is there any possibility to fetch the sites in a different way allowing me to display all pages?

If you want to embed a webpage within another one then you should use the iframe element:
<iframe src="http://asfasffvasf.com"/>
You can style this like any other block element, and set an explicit width and height.
Some pages ask browsers not to include them within iframes (using the X-Frame-Options header). I don't think there's an easy way to solve this on the client side, but you could create a simple backend or proxy to request the page you want and return the content. This gets round the iframe restriction because you're now including content from your own domain.
This does have a couple of security issues to be aware of:
You've now made a backend which can be used to download any page on the Internet. There's a denial of service vulnerability if someone makes lots of requests to download huge pages.
The pages you're including will no longer be restricted by the same origin policy. Scripts on those pages will be able to interact with everything on the parent page. This may be a problem if you plan on creating login functionality in the future.

Seems like you are looking for iframe property.It specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<iframe src="http://asfasfasfa.com"></iframe>

Resizing HTML Iframe using a src I can't control

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

iframe dynamic src

I want to get updated url of iframe using javascript?
Like this:
<iframe src="http://yahoo.com" id="ifrm" onload="iframeurl()" ></iframe>
<script>
function iframeurl() {
var ifrm = document.getElementById("ifrm");
alert(ifrm.src);
}
</script>
but the code above doesn't work. How can I do this?
I'll use external links in iframe which is not hosted on same domain where I'm using the code above.
Please Help.
Thanks
thanks again. http://yahoo.com is just an example. Again my domain is szacpp.com and I need to get the links of other.com. You mean I need to put htaccess in other.com while I don't have access the domain.

The src attribute of an iframe will not update when the page changes within the iframe.
Your only option would be to query the document in the iframe, however that will only work if the page in the iframe comes from the same domain (otherwise you hit the same origin policy)
UPDATE
IF you have access to other.com, then you should be able to set Access-Control-Allow-Origin in the .htaccess file (assuming you are using a server that uses that file system).
You will find more information...
http://www.w3.org/TR/cors/#access-control-allow-origin-response-header
http://enable-cors.org/
Access-Control-Allow-Origin Multiple Origin Domains?
If you do not have access to other.com then you are simply out of luck. It will be impossible for you to know what the new page is, because the src attribute of the iframe will not be updated when the page changes within the iframe. And you will not be able to use JavaScript due to the same origin policy that I (or more precisely, Quentin) mentioned earlier.

try this :
<iframe src="http://yahoo.com" id="ifrm" onload="iframeurl()" ></iframe>
<script>
function iframeurl() {
var ifrm = parent.document.getElementById("ifrm");
alert(ifrm.src);
}
</script>

Get IFrame innerHTML using JavaScript

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.