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

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

Related

Change url in adress bar when using iframe

I have index page that contains items i want to keep on all the pages. And i have iframe in the middle of the index page, where all the content is shown.
<iframe id="midfr" src="news.html"></iframe>
When clicking on links, content goes to midfr, while website url is always like www.example.com/
Is there a way to have urls like www.example.com/iframe_url/ when going to specified page using iframes? I dont even have a clue on how to do that.
However ive seen some websites that have some constant divs, while main content blinks on visiting links. Although their source code didnt include any iframes..
No, because iframes don't provide any events to the DOM that you can use to change the URL.
Even if your write it as a method to capture and execute the event. You will still not get it. Because it is not allowed.
Iframe won't provide control over any event, untill the code to handle the event is already a part of it.
You can change the Website's URL using History PushState method. But only if you can have an event to do that. Since iframes don't provide you with an event you won't be able to change the URL.

Controling link behaviours in an Iframe

Ok so any help here would be great
I have a HTML page with an I frame loading a site of mine in it…
What I need to do is check in the iframe from the main document, the target attribute of a link and if it's blank, hijack it and add my own custom functionality from outside of the iframe in the main HTML document
The issue I have is the site being loaded in to the frame is on a different domain so I am not sure if this can be done? I have full control of the site been loaded in to the I frame so is there something in there I can set to allow it?
What I effectively want to do is hijack the links in an iframe which I guess could be an issue?
Can this be done, alternately does anyone know a way I could achieve what I am trying to do?
Thanks

Open two iframes without full reload of the second iframe

I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?
Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!
The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.

How to make javascript that'll click automatically inside iframe's link?

Is it possible ?
I've made on page with iframe, I want a script that'll click automatically inside in one iframe's link.
But I also want that script to detect half link, I mean the link which is in iframe changes everytime, but the first part of the link doesnt change, so the javascript should detect half link which doesnt change and redirect to it...
Why don't you write a "client" library and import it within iFrame. This library listen to a message from HTML5 postMessage call with certain attribute and react appropriately. Since you have access to the parent object through the event object (or window.parent), you can also send response back with the result. This way, it doesn't matter if it's cross-domain and as long as this library exists, you can communicate back-and-forth and even has the iFrame initiate if you write it properly.
I can't share the code with you since it's our proprietary library, but that's part of the idea.
If the content of your iframe is from a different domain, you can't. Allowing this would be a major security concern.
If your iframe content is in the same domain, then you can access the iframe content through its contentWindow property. You can then work with your iframe link the same way you would if the link was in the main page.

How to force a page to stay inside an iframe?

I want to allow any page to be loaded inside an iframe. It's for teaching purposes so I want to know if it's possible to force let's say:
<iframe src="http://www.wolframalpha.com/input/?i=5*sin%28x%29" width="400" height="100">
to stay inside the iframe. By default it has some kind of javascript that opens in full page.
UPDATE: What if i use frames? (please don't throw bricks at me) Could they know if the page is inside a frame?
If the page itself wants to break out of being framed with it's own javascript (which apparently this page is doing), it can do so and I know of no way to prevent it other than turning javascript off in your own browser which obviously isn't an option for general viewing.
On some browsers, you can set an attribute on the iframe element that sets a security policy that prevents the iframe from executing JavaScript. I don't remember the attribute name and not sure which browsers support it (I'm sure ie does, not quite sure about the others). If you have problem finding more details, I'll look it up when I get home (on a mobile right now)
edit: found it - security="restricted". Seems to be IE-only.
If you have links outside of this iFrame and want them to load into that iFrame on the same page, you'll have to give it a name, then target the named iFrame within your link's href.
<iframe src="http://google.com" name="myframe" hieght="100" width="100"></iframe>
<br />
Derp.
However, if you're loading a page into your iFrame that's loading links with target="blank", then those will go to a new window; unless you don't have access to those pages, you won't be able to change the links (short of writing JS to dive into your iFrame, etc).

Categories