CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user3302088
user3302088

Reputation: 3

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

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">

Upvotes: 0

Views: 1954

Answers (4)

MarijnS95
MarijnS95

Reputation: 4793

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');;
    });
});

Upvotes: 2

Magnus Engdal
Magnus Engdal

Reputation: 5604

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.

Upvotes: 1

Martijn
Martijn

Reputation: 16103

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>

Upvotes: 1

Emilio Rodriguez
Emilio Rodriguez

Reputation: 5749

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

Upvotes: 0

Related Questions