ansaurus

Question

How do I access the value of a button in a frame from the top level page with javascript?

Answer 1

+1 A:

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

Jason 2009-11-19 21:47:15

testing your theory...

abraganza 2009-11-19 22:06:47

Answer 2

+1 A:

The frames are all in the same domain, right? If they're not, your problem is the Cross Domain Policy.

Pekka 2009-11-19 21:48:59

they are all in the same domain...

abraganza 2009-11-19 22:06:06

Answer 3

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

abraganza 2009-11-20 15:26:41

Note: The use of "id" should be in addition, and not as replacement, to "name". An "id" is to «identify» an element in the HTML-Tree. The name tag in a form is to map a "name" to the value the form element contains. Removing the name causes the browser not to send the value to the server. Just keep that in mind, as you wrote: «SWITCHED all the controls to use id="=.." instead of name="..."»

cimnine 2009-11-20 15:33:53

got it thanks 10char

abraganza 2009-11-20 15:40:26

ansaurus

tags:

views:

answers:

How do I access the value of a button in a frame from the top level page with javascript?

related questions