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)

Unable to print the pdf loaded in iframe

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.

Reload parent iframe from child popup

I have one page say display.aspx that is being used in other sites in Iframe. In display.aspx page, I have one button which opens Facebook popup for sharing. After successful share it gives me response in one page in my site say FBResponse.aspx. From FBResponse.aspx,I want to reload the display.aspx page.
I have tried 1) window.opener.history.go(0);
2) window.opener.location.reload(false);
3) opener.location.reload(false);
But none of these working for me.
Moreover, I have made one function in display.aspx page, in that function I have written code to reload the page. I tried to call this function from FBResponse.aspx ,but in Chrome I am getting error The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match and in FF I am getting error Permission denied to access property in IFRAME. Actually my site is working on https where as the sites which are using my page display.aspx might be using http protocol.
Any solution?
Thanks,
Priya

Hey Try This one.
<form onsubmit="window.top.location.href = 'http://www.wesite.com/test.html';">
Be attention iframe and top must be on same domain and don't break same origin policy.
Hope it would helps you.

You can't unless both page and iframe have same domain (and in this case you can make protocols to match). Same origin policy can be a biatch.

Javascript call from swf in iframe

I have a javascript function is called from AS3 when all are in same html document, it's all succesfull.
But when i put the swf in iframe, I get an error like ;
Unsafe JavaScript attempt to access frame with URL http://example.com/ from frame with URL http://example2.com. Domains, protocols and ports must match.
Iframe and parent documents have diffent domains. How can I fix it? In this case one of requirements is it should work with also in iframe. So putting all of them in same frame is not solution.

As Philipp has commented, this is being blocked by the browser's cross-scripting protection (the SWF element in this is merely a distraction - any javascript in the child iFrame will be blocked from calling the parent frame, if they do not share the same domain).
Your parent frame should have access to the child iframe, however, so you could set a parameter in the child iframe from your swf and poll for that from the parent frame.
Otherwise it's trivial to create a server-side script in PHP or .NET or whatever you're comfortable with, and bounce a value off that.

Need to change #src of a parent iframe from within child iframe

I have the following HTML markup (don't ask....)
- document //main site
- <iframe> //my site
- <iframe> //site within my site
- <frame>
- <a onclick="JavaScript:parent.parent.location.href='http://bla.com;return false;'">
Basically, main site is calling my site in an iframe. I, in turn, also have an iframe on my site where I'm calling 3rd site. The third site has a frameset with a frame in it that has a link. When clicking on this link, it has to change the url of my site. My site and my child site are on the same domain. When I'm running my site as "stand-alone" (not in iframe) the above code works fine in all browsers.
Once I open my site in an iframe of the main site, it looks like the above code is trying to change the source of the main site. In FireFox I get a console message "Access to property denied". In IE it opens up a new window with my site not in the main site anymore.
What is the correct JavaScript to change the #src attribute on my site when I'm within an iframe?

You are banging your head against the wall that is the same origin policy here. This is XSS country and strictly forbidden, no way around it, unless both domains agree to talk together.
You can read more about cross domain communication using iframes, but again, unless the different domain agree to talk together, you are out of luck.
Although this might seem frustrating, be glad of this rule next time you use homebanking ;)

Can you try something like this
<document> //main site
<iframe id="my_iframe"> //your site
<iframe> //site within your site
<frame>
<a onclick="JavaScript:Top.document.getElementById('my_iframe').location.href='http://bla.com;return false;'">
Top refers to the main window, and then getElementById('my_iframe') will give you your iframe element.

I believe that you're trying to do communication between different pages.
You may take a look this API: HTML5 Cross Document Messaging
Basically, if you want to tell the parent iframe to navigate to a certain url, you can do this:
In the site within my site html:
// onclick of your anchor, post message (an event) with an expected origin
window.postMessage("http://bla.com", "www.sitewithinmysite.com");
In my site html:
// listen to the event "message"
window.addEventListener("message", messageHandler, true);
function messageHandler(e) {
// only recognize message from this origin
if (e.origin === "www.sitewithinmysite.com") {
// then you can navigate your page with the link passed in
window.location = e.data;
}
}

You might want to have the pages communicate using AJAX. Have the site that needs to change its URL listen by long polling to to a node.js server.