Dual Link within one href?

**SageMaven** · 01-02-2007, 04:19 PM

here's the deal:

I have a page that has two iframes. is it possible to have one link change both iframes?

Is this even possible? If so please tell how.

Thanks!!

**catbert303** · 01-02-2007, 04:59 PM

Hi,

here's a quick example using Javascript. The example assumes that the links (given a target attribute iframe) should open in all the iframes. Though it shouldn't be hard to modify if you have more iframes and only want the links to open in a couple of them.

Code:

<html>
<head>
<script type="text/javascript">
function openInIframes(e) {
    // find the link that was clicked on and grab the value of it's href attribute (working around different browser event models)
    if (!e) var e = window.event;
    var href = (e.target || e.srcElement).href;

    // find the iframes in the page and set them all to display the link
    var iframes = document.getElementsByTagName('iframe');
    var n = iframes.length;
    while (n--) {
        iframes[n].src = href;
    }

    // because we're using javascript to navigate to the link (by displaying it in the iframes) we don't want the browser to follow the link like normal
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

onload = function() {
    // find the links with the right target attribute and setup their onclick events 
    var links = document.getElementsByTagName('a');
    var n = links.length;
    while (n--) {
        if (links[n].target && links[n].target == 'iframe') {
            links[n].onclick = openInIframes;
        }
    }
};
</script>
</head>
<body>

<iframe width="400" height="300"> </iframe>
<iframe width="400" height="300"> </iframe>

<p><a href="http://www.google.com" target="iframe">Google</a> <a href="http://www.flashkit.com" target="i
frame">Flashkit</a></p>

</body>
</html>

I've only tested in some mac browsers (Safari, Opera) so far, but it should be OK for IE windows and others too.

**SageMaven** · 01-02-2007, 05:30 PM

That freakin rocks! that you were able to help me so quickly, I unfortunately am not that well versed in javascript and don't understand how to make those changes... how would I make one click (for instance) in iframe1 load google.com and also in iframe2 load yahoo.com?

Thanks!!!!!!

**catbert303** · 01-03-2007, 10:55 AM

Ah, OK. That would be slightly different. You'd need a way of associating the different urls with the link. Here's a modified version. It uses the target attribute of the link to store the urls (separated by spaces)

Code:

<html>
<head>
<script type="text/javascript">
function openInIframes(e) {
    // find the link that was clicked on and grab the value of it's href attribute (working around different browser event models)
    if (!e) var e = window.event;
    var urls = (e.target || e.srcElement).target.split(' ');
    // loop through the urls
    for (var i = 0; i < urls.length; ++i) {
        // and load each one into a frame - the frames have id attributes frame1, frame2...
        var frame = document.getElementById('frame' + (i + 1));
        if (frame) {
            frame.src = urls[i];
        }
    }

    // because we're using javascript to navigate to the link (by displaying it in the iframes) we don't want the browser to follow the link like normal
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

onload = function() {
    // find the links with the right target attribute and setup their onclick events 
    var links = document.getElementsByTagName('a');
    var n = links.length;
    while (n--) {
        if (links[n].target && links[n].target.indexOf(' ') != -1) { // the link has a target with a space in it
            links[n].onclick = openInIframes;
        }
    }
};
</script>
</head>
<body>

<iframe width="400" height="300" id="frame1"> </iframe>
<iframe width="400" height="300" id="frame2"> </iframe>

<p><a href="http://www.google.com" target="http://www.google.com http://www.yahoo.com">Google/Yahoo</a></p>

</body>
</html>

**SageMaven** · 01-03-2007, 12:40 PM

Thank you SOOOO much, this is exactly what I needed!!!!!!!!!

Thread: Dual Link within one href?

Thread Tools

Display

Dual Link within one href?

Still need a little help

Excellent!

Posting Permissions