Home/ Questions/Q 6804941
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:31:38+00:00

I have an application that needs to retrieve a value out of a hidden

  • 0

I have an application that needs to retrieve a value out of a hidden input form field. However, this application has a base page which calls another page that is in an iFrame and then it also can call itself inside another iFrame:

default.asp -> screen.asp (in iFrame)
screen.asp -> a new instance of screen.asp (in iFrame)

document.getElementById('focusValue').value
window.frames[0].document.getElementById('focusValue').value
parent.frames[arrVal].document.getElementById('focusValue').value

When I reference the hidden input form field from default -> screen I can use the standard document.getElementById('focusValue').value;. Then when I’m in the 1st level iFrame I have to use window.frames[0].document.getElementById('focusValue').value;. Then when I’m in the 2+ levels in an iFrame I have to use the parent.frames[arrVal].document.getElementById('focusValue').value;.

A common structure that I’m starting to see is this:

if(document.getElementById('focusValue') == undefined){
        window.frames[0].document.getElementById('focusValue').value = focusValue;
        console.log('1');
}else if((parent.frames.length -1) == arrVal){
        console.log('2');
        if (arrVal > 0) {
            parent.frames[arrVal].document.getElementById('focusValue').value = focusValue;
        }
}else{
    document.getElementById('focusValue').value = focusValue;
    console.log('3');
}

Now I can certainly do this but outside of writing a novel worth of comments I’m concerned with other programmers(or me 1 month from now) looking at this code and wondering what I was doing.

My question is there a way to achieve what I’m looking to do in a standard form? I’m really hoping that there is a better way to achieve this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would suggest you have each page do the work of finding the value you want by calling a method. Basically exposing a lookup interface. Then you only need to call a method on the target page from the parent page. Proper naming will help developers understand what is going on and using methods will simplify the logic.

    Or if you only need to get the value from the parent page, then you could register a hook with each page in an iframe using a common interface. Each page can just call that hook to get the value. This prevents your complex logic of determining what level the page is. Something like

    iframe1.GetValueHook = this.GetValue;
iframe2.GetValueHook = this.GetValue;

    Then each page can just call 

    var x = this.GetValueHook();

    If you have nested pages, you could make this recursive. If you need communication between all pages then use the same approach but with a registration process. Each page registers itself (and it’s children) with it’s parent. But if you need to do this then you should reevaluate your architecture.

    Example:
    register.js

    var __FRAMENAME = "Frame1";
var __FIELDID = "fieldId";
var __frames = [];

function RegisterFrame(frame) {
    __frames.push(frame);

    for (var i = 0; i < frame.children.length; i++) {
        __frames.push(frame.children[i]);
    }

    RegisterWithParent();
}

function RegisterWithParent() {

    var reg = {
        name: __FRAMENAME,
        getvalue: GetFieldValue,
        children: __frames
    };

    if(parent != undefined && parent != this) {
        parent.RegisterFrame(reg);   
    }
}

function SetupFrame(name, fieldId) {
    __FRAMENAME = name;
    __FIELDID = fieldId;

    RegisterWithParent();
}

function GetFieldValue() {
    return document.getElementById(__FIELDID).value;
}

function GetValueFrom(name) {
    for (var i = 0; i < __frames.length; i++) {
        if (__frames[i].name == name) {
            return __frames[i].getvalue();
        }
    }

}

    index.html

    <html>
<head>
<script language="javascript" type="text/javascript" src="register.js"></script>
</head>
<body>

PAGE

<input type="hidden" id="hid123" value="123" />
<iframe id="frame1" src="frame1.html"></iframe>
<iframe id="frame2" src="frame2.html"></iframe>
<script type="text/javascript">
    SetupFrame("Index", "hid123");

    setTimeout(function () { //Only here for demonstration. Make sure the pages are registred
        alert(GetValueFrom("frame3"));
    }, 2000);
</script>
</body></html>

    frame1.html

    <html>
<head>
<script language="javascript" type="text/javascript" src="register.js"></script>
</head>
<body>
<input type="hidden" id="hid" value="eterert" />
<script type="text/javascript">
    SetupFrame("frame1", "hid");
</script>
</body></html>

    frame2.html

    <html>
<head>
<script language="javascript" type="text/javascript" src="register.js"></script>
</head>
<body>
<input type="hidden" id="hid456" value="sdfsdf" />
<iframe id="frame2" src="frame3.html"></iframe>
<script type="text/javascript">
    SetupFrame("frame2", "hid456");
</script>
</body></html>

    frame3.html

    <html>
<head>
<script language="javascript" type="text/javascript" src="register.js"></script>
</head>
<body>
<input type="hidden" id="hid999" value="bnmbnmbnm" />
<script type="text/javascript">
    SetupFrame("frame3", "hid999");
</script>
</body></html>

    This would be better if you can change it up to use a dictionary/hash tbale instead of loops.

    • 0