0

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 : 

<a href="Hyperlien_Wikipedia.html" class="color" <strong>target="iframe_a"</strong> title="Hyperlien">hyperliens</a>

<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 :)

userator
  • 93
  • 2
  • 11

1 Answers1

0

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

Community
  • 1
  • 1
henningj
  • 386
  • 3
  • 6
  • If i do understand, the preventDefault is able to listen if a link is cliked ( they understand the kind of event ) and then if a link is cliked it will creat a new div. But can it get the url of the link clicked too? i'm not sure but maybe i didn't understand very well. – userator Apr 06 '15 at 21:10
  • Referring to the first link from my sources (http://stackoverflow.com/a/2429058/4233321) you could use `this.locations.href`. If you scroll down you see an answer (MutationObserver), that seems to fit your problem very well (http://stackoverflow.com/a/24726977/4233321) – henningj Apr 06 '15 at 21:26