Can Javascript switch frames?
I am trying to use JS to toggle the frameborder attribute of a frame. Here's my test case:
<html>
<head>
<script type="text/javascript">
function off() {
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
alert ("before, frame f1 had frameBorder=" + f1.frameBorder);
f1.frameBorder = "0";
alert ("after, frame f1 has frameBorder=" + f1.frameBorder);
alert ("before, frame f2 had frameBorder=" + f2.frameBorder);
f2.frameBorder = "0";
alert ("after, frame f2 has frameBorder=" + f2.frameBorder);
}
</script>
</head>
<frameset cols="50%, 50%" name="fs">
<frame frameborder="1" src="http://bikeshed.com" id="f1" name="f1" />
<frame frameborder="1" src="http://bikeshed.com" id="f2" name="f2" />
</frameset>
</html>
Load this in Firefox, open Firebug and type "off ()" into the console. It runs my function, which reports that both frames were set to "1" and are now set to "0". However, the frame frame does not disappear.
Am I trying to do this? If so, how?
+1
a source to share
2 answers
Using iframes instead of frames seems to work. You will have to do a bit of CSS work to complete the illusion of a frameset.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Frame Test</title>
<script language="javascript">
var off = function () {
document.getElementById('frame1').style.borderWidth = 0;
alert('off');
}
</script>
</head>
<body style="margin: 0; padding: 0">
<table style="width: 100%; height: 100%" cols="2">
<tr>
<td><iframe id="frame1" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
<td><iframe id="frame2" src="http://www.google.com" style="margin: 0; width: 100%; height: 100%"></iframe></td>
</tr>
</table>
</body>
</html>
+2
a source to share