We Keep Coding

All link in iframe (different domain) must open in a new div

The idea is to load a webpage in iframe ( for example wikipedia.com ) and that each link of that page that is clicked must create a new div with the content of the link in it.
Its like you are surfing, going from page to page but you will keep each page you see stuck in one page. So at the end of your surf, you will have all the history of the page visited.
I have a prototype of this, which is very…. wack but it stimulate the thing. You can check the prototype here . In order to make this prototype work like it should be , you can only click yellow background link. To make this work i have creat name attribut for iframe and target attribut for links.
The link has the same target as the name of the iframe. For example :
hyperliens
<div id="wrap2">
<iframe class="frame" frameborder="1" <strong>name="iframe_a"</strong> src="" >
</iframe>
</div>
Of course this prototype just stimulate how it should look but its not the real way to make it.
Here are all the problem :
1) I have to manually add the « target » attribut to all the link which is not possible because the idea is to load any website coming from a different domain name. ( like wikipedia, bbc etc… ). More over, in this prototype i have save the page ( wikipedia) and upload them to make it work so its local content. which is not good for my case.
2) I know that the same-origin policy doesn’t allow the communication between parent page and child iframe ( with different domain name ). According to me if i want to set that all the tag link show their content in a new div , i have to communicate with the child iframe.
So i’m wondering how i’m supposed to do… I need the easiest way because i’m ok with html/css but i’m newbie with js…. I was wondering if it would be easier if i use a chrome extension, like injecting js with background.js api. I also heard the postMessage solution in order to communicate with iframe even if they have different domain name. But I don't know if this solution is ok for this case.
I’m waiting for your answer :)

You can use jQuery to listen when the content changes. If it does, you prevent the default (don't change the content) and create a new iframe/div.
$("#iframeid").load(function(event){
//prevent normale action
event.preventDefault();
//create new div/iframe
[...]
}
This code is untested and is also fired, when the iframe is loaded initialy. Maybe you can find some workaround there, but I guess you get the idea.
Sources:
iFrame src change event detection?,
http://api.jquery.com/event.preventdefault/
edit: Add explanation

Is there a way to prevent an iframe from redirecting parent window, but in such a way that "top level" redirects still work inside the iframe itself?

So I've read about the HTML5 sandbox property and I understand that if I want to prevent an iframe redirect its parent window I can use the sandbox property leaving allow-top-navigation out. However when this is done, if the iframe was originally relying on top level redirection, what happens in its place is that it redirects to a blank page, effectively breaking navigation.
Can I prevent the iframe from tinkering its parent window while still allowing "top level" redirects, only letting these work within the context of the iframe instead of being top level?
Edit: For context, I'm working with a third party and its page has a form with a target _top. If the iframe is sandboxed, upon submitting the form users get a blank page, if it's not sandboxed the entire page is redirected. I'm looking for something that would allow to submit the form and show the result within the iframe itself.

With HTML5 the iframe sandbox attribute was added.
At the time of writing this works on Chrome, Safari, Firefox and recent versions of IE and Opera but does pretty much what you want:
Allows the iframe content to be treated as being from the same origin as the containing document
<iframe src="url" sandbox="allow-same-origin"></iframe>
Browser Compatibility
Some Useful links
w3schools for sandbox
developer.mozilla.org iframe
-

You can use the onbeforeunload property and determine if you wan to redirect or not.
Here is the docs page for it
Basically what I would try is this:
Make a function that adds the sandbox attribute with everything, just leaving out the allow-top-navigation, to the iframe
Bind a function to the onbeforeunload property of the iframe that calls the function that adds the sandbox attribute (be sure not to return anything because a dialog will pop-up)
This should work because the request is made in the iframe first, and then we can prevent it from carrying over to our top level window.
Another thing you should check is if you maybe left out the allow-formsoption, which can cause what you are describing.
Please let me know if any of this worked.

How to programatically remove sandbox attribute from an iframe with javascript

I didn't think this was possible, however, i found this quote:
"It is strongly discouraged to use both allow-scripts and allow-same-origin at the same time, as that allows the embedded document to programmatically remove the sandbox attribute."
My iframe needs to have a sandbox, but only when I am browsing in certain URLs where the embedded browsing context tries to navigate (load) content to the top-level browsing context (Jump out of frame...)
On other pages the sandbox needs to be removed entirely, as it wont allow me to browse away from a site with a different origin...
The frame attempting navigation is sandboxed, and is therefore disallowed from navigating its ancestors.
Programatically changing the sandbox with :
document.getElementById("frame").sandbox = "";
...doesnt work either as this still places restrictions... Therefore, i need to somehow remove the attribute entirely, how would i go about doing this?

These flags only take effect when the nested browsing context of the
iframe is navigated. Removing them, or removing the entire sandbox
attribute, has no effect on an already-loaded page.
More info - Here

You can remove the sandbox attribute from the element using iframe.removeAttribute("sandbox") this will make the iframe non-sandboxed for the next content you load into it, not the currently loaded one.

Change onload value within iframe using javascript

I have a page named somepage.html and the page otherpage.html as iframe in somepage.html
the source of somepage.html is
<body><iframe src="otherpage.html name="frame"></body>
The source of otherpage.html is
<body onload="somefunction()" onunload="otherfunction" >the other content here</body>
I want to disable the onload function without touching the code of otherpage.html(iframe). I want to disable it on somepage.html
Thank you in advance

In IE you can use the security="restricted" attribute. It doesn't do what you want (disable javascript altogether) but should force the IFRAME to run in a differnent zone and prevent it from accessing your page.
The HTML 5 sandbox attribute, when implemented, may also be close to what you are looking for. In particular allow-scripts. Now you just need it to be implemented in a majority of user's browsers ;)

Generating dynamic content in Iframe IE 7

Is it possible to generate dynamic content inside Iframe? if yes , how ? I'm having some problems with IE, thank you
UPDATE :
I'm creating a modal window which plays video, but when I close it it remains playing in IE7 although its hidden but it firefox it stops playing as it should. So I just wanted to try with iframe, thinking maybe that will solve my problem :)

As #Aaron already noted, you can use everything you use for normal pages in your iFrame.
Noteworthy however is that the content in the iframe is an isolated page.
No code from your parent page can access anything in the iframe's page.
This is a security measure that prevents Evil People from showing you trusted pages with custom javascript hooks attached.

An iframe is just like any other HTML window, so yes, you can generate dynamic content.
To create content use the normal syntax:
var div = iframe.document.createElement("div");
Please include a description of what exact problem you face. Otherwise, we can't help much.
[EDIT] Note that the URL of the document in the iframe must contain the same domain or the Same Origin Policy will prevent the access.
As for your problem with the modal window: Are you saying that the window doesn't close? That sounds like a IE bug :/