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!!
Printable View
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!!
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.
I've only tested in some mac browsers (Safari, Opera) so far, but it should be OK for IE windows and others too.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>
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!!!!!!
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>
Thank you SOOOO much, this is exactly what I needed!!!!!!!!!