Making a link load content in an iframe on a new page

Question

I need to create a link that opens a page yet sets a new target within an iframe on that page is this possible?

So for example.

'Link1' has to link to 'index.html' this page already has an iframe on it, yet I need 'hamsters.html' to load within the iframe when 'index.html' loads.

There will also be a

'Link2' and 'Link3' these will also link to 'index.html' however 'link2' will load the page 'rabbits.html'in the iframe, and 'link3' will load the page 'gerbils.html' within the iframe. The iframe still being located in 'index.html'.

I hope this is clear, my original links code, 'link1' in the example is located below.

Thanks

<td onclick="window.location = 'index.html';" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF">

score 2 · Answer 1 · answered Feb 12 '14 at 15:10

2

Magnus Engdal is correct, but you can make the URL-getting-code a lot easier. Use a hash instead of the query string, so you change data-iframe to:

<td class="link" data-iframe="index.html#hamsters.html"></td>
<td class="link" data-iframe="index.html#rabbits.html"></td>

And on the new page you do:

$("#iframe").attr("src", window.location.hash);

Done. Saves a lot of code (and bandwidth and speed).

BTW don't forget to add this code to the first webpage:

$(function () {
    $('.link').click(function () {
        window.location.href = $(this).data('iframe');;
    });
});

answered Feb 12 '14 at 15:10

MarijnS95

4,703
3
23
47

@MagnusEngdal I wanted to write what you said as answer, but then yours popped up, so I decided to post it as an elaboration. I still wonder though why the asker accepted the answer above, which is not doing what the asker wanted, namely after loading the index.html page set the right src of the iframe... Strange. – MarijnS95 Feb 12 '14 at 17:17
I guess it worked for him/her :) I learned something new from your answer, and that's what SO is about for me. Cheers! – Magnus Engdal Feb 12 '14 at 19:15
And that is really Nice! For me is it that I can answer things about a certain part of eg. javascript, but I have no knowledge about something else. When trying new technologies like webRTC and webAudio, I used stackoverflow to read and learn about it, and now I can answer questions in that 'genre', and that is how it is so useful for everyone – MarijnS95 Feb 12 '14 at 19:44

Martijn · Answer 2 · 2014-02-12T14:57:47.787

Let me start with this:
Don't inline style! Also;
Don't inline Javascript!

Then, more relevant info, you could do something as the code below. Just add the data attribute to any element you want (unless you use anchors, you should adept the code in that case) and it will work:

<div data-link="index.html">Click me for index</div>
<label data-link="index2.html">Click me for index2<label>

Javascript:

$(document).ready(function(){
    // Use jQuery to select all element with the 'data-link' attribute
    $('[data-link]').on('click', function(e){ // add a click eventlistener to it
        e.preventDefault(); // this is optional, prevent what it normally would do
        $('#iframe')[0].src = $(this).data('link'); // set the iframe to the value of the attribute
    });
});

On a whole other note, this is not the way to go :) Use PHP and some handy urls:

<a href="index.php?page=gerbils">Gerbils</a>
<a href="index.php?page=hamsters">hamsters</a>

And make index.php switch pages. There are plenty of simple examples which can show you how to do this. It's 2014, don't use iframes unless you have a very good reason.
This will allow you to one day switch to nice urls:

<a href="/gerbils">Gerbils</a>
<a href="/hamsters">hamsters</a>

Hi I am not seeing how the code above fits in with my OnClick link above, could you please elaborate? Thank you! — user3302088, Feb 12 '14 at 15:20
I've removed the need for inline styling. That javascript needs to be included, and then everything with that `data-link=""` attribute will trigger the iframe to change. I think my answer explains it well, if not, just code the code and make it work, and then change it untill you got what you need — Martijn, Feb 12 '14 at 15:29

score 1 · Answer 3 · edited May 23 '17 at 12:20

If I understand you correctly, you want to redirect to another page where the iframe is located. Since none of the other answers is addressing this, you could send the iframe target as a querystring.

Here is an example:

On your original page

HTML

<td class="link" data-iframe="hamsters.html"></td>
<td class="link" data-iframe="rabbits.html"></td>

JS

$(function () {
    $('.link').click(function () {
        window.location.href = "index.html?iframe=" + $(this).data('iframe');;
    });
});

When you click on a <td> element with the class link on your original page, you will be redirected to index.html?iframe= + whatever is contained in data-iframe.

Now you just need to handle the incoming request on index.html like below.

HTML

<iframe id="iframe"></iframe>

JS

$(function () {
    if (typeof getUrlVars()["iframe"] != 'undefined') {
        $("#iframe").attr("src", getUrlVars()["iframe"]);
    }
});

function getUrlVars() {
    var vars = [],
        hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

Borrowed getUrlVars from here.

score 0 · Accepted Answer · answered Feb 12 '14 at 14:50

Try this:

<td onclick="(function(){window.location='index.html';})()" style='cursor: hand; cursor: pointer;' background="images/static.gif" id="td1" width="25%" bgcolor="#FFFFFF">

But Martijn is right, you should not be inlining any Javascript or CSS in your tags if possible

Making a link load content in an iframe on a new page

4 Answers4