How do I access the value of a button in a frame from the top level page with javascript?
I have a main page that contains a frameset with some frames. I need to access and set the text of a button inside one of my frames from a javascript method in the main page.
I believe its the window.frames that is the issue. It works in IE6 but not in Firefox. Is there something else I can use in place of this to get it to work across all browsers?
Any help would be appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>blah blah</title>
<script language="javascript" type="text/javascript">
var showString = "show";
var hash = String(window.location.hash);
function showHideFrames()
{
var contentPage;
contentPage = hash.substring((showString.length + 2), hash.length);
var showCheck = h开发者_如何学运维ash.substring(1, (showString.length + 1));
// Grab the show or hide
if (showCheck == showString)
{
document.getElementById("outerFrame").cols = "285, *";
window.frames['topFrame'].document.form1.showHideButton.value = "Hide";
}
else
{
document.getElementById("outerFrame").cols = "0, *";
window.frames['topFrame'].document.form1.showHideButton.value = "Show";
}
if (contentPage != '')
{
document.getElementById("contentFrame").src = contentPage;
}
document.getElementById("navFrame").src = "default.aspx?hash=" + contentPage;
}
</script>
</head>
<frameset onLoad="showHideFrames()" name="outerFrame" id="outerFrame" border="0" frameborder="1" framespacing="0" cols="0,*" scrollbars="no">
<frame name="navFrame" id="navFrame" scrolling="yes" noresize="noresize" />
<frameset name="innerFrame" id="innerFrame" border="0" frameborder="0" framespacing="0" noresize="noresize" rows="40,*">
<frame name="topFrame" id="topFrame" src="topFrame.htm" scrolling="no" noresize="noresize" />
<frame name="contentFrame" id="contentFrame" scrolling="auto" />
</frameset>
</frameset>
</html>
Try using getElementById() on the inner frame's document object to get access to the button element.
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Hide';
This works for me in both IE and Firefox if the button's id is "showHideButton".
The frames are all in the same domain, right? If they're not, your problem is the Cross Domain Policy.
I figured it out. It ended up being a combination of a couple of things.
- I switched all the controls to use id="=.." and name="..."
- I replaced all direct references to objects with document.getElementById.
- Replaced some IE-specific code with more generic code.
- Replaced < button ... > < /button > with < input type="button" ... / >
Thanks for all the input from people. Here is the code if anyone is interested.
main page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var showString = "show";
var hash = String(window.location.hash);
function showHideFrames() {
var contentPage;
contentPage = hash.substring((showString.length + 2), hash.length);
var showCheck = hash.substring(1, (showString.length + 1));
// Grab the show or hide
if (showCheck == showString) {
document.getElementById("outerFrame").cols = "285, *";
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Hide';
}
else {
document.getElementById("outerFrame").cols = "0, *";
window.frames['topFrame'].document.getElementById('showHideButton').value = 'Show';
}
if (contentPage != '') {
document.getElementById("contentFrame").src = contentPage;
}
document.getElementById("navFrame").src = "default.aspx?hash=" + contentPage;
}
</script>
</head>
<frameset onload="showHideFrames()" name="outerFrame" id="outerFrame" border="0"
frameborder="1" framespacing="0" cols="0,*" scrollbars="no">
<frame name="navFrame" id="navFrame" scrolling="yes" noresize="noresize" />
<frameset name="innerFrame" id="innerFrame" border="0" frameborder="0" framespacing="0" noresize="noresize" rows="40,*">
<frame name="topFrame" id="topFrame" src="topFrame.htm" scrolling="no" noresize="noresize" />
<frame name="contentFrame" id="contentFrame" scrolling="auto" />
</frameset>
</frameset>
</html>
top frame
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script language="javascript">
showString = "show";
var hash = String(window.location.hash);
function ShowHideButton_Click() {
var action;
var showCheck = document.getElementById("showHideButton").value;
if (showCheck == "Show")
action = "show";
else
action = "hide";
ShowHideButton(action);
return false;
}
function ShowHideButton(action) {
if (action == "show") {
parent.document.getElementById("outerFrame").cols = "285, *";
document.getElementById("showHideButton").value = "Hide";
}
else {
parent.document.getElementById("outerFrame").cols = "0, *";
document.getElementById("showHideButton").value = "Show";
}
}
</script>
</head>
<body>
<form name="form1">
<div align="right">
<input type="button" id="showHideButton" onclick="ShowHideButton_Click()" value="Show" />
</div>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论