javascript – getElementById有3种方式

2023年1月28日 141次阅读

我有一个应用程序需要从隐藏的输入表单字段中检索值.但是,此应用程序有一个基页,它调用iFrame中的另一个页面,然后它也可以在另一个iFrame中调用自己：

default.asp – > screen.asp(在iFrame中)
screen.asp – > screen.asp的新实例(在iFrame中)

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

当我从默认引用隐藏的输入表单字段时 – >我可以使用标准document.getElementById(‘focusValue’).value;.然后,当我在第一级iFrame时,我必须使用window.frames [0] .document.getElementById(‘focusValue’).value;.然后,当我在iFrame中的2个级别时,我必须使用parent.frames [arrVal] .document.getElementById(‘focusValue’).value;.

我开始看到的一个常见结构是：

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');
}

现在我当然可以做到这一点,但除了写一篇小说的评论之外我还关心其他程序员(或者我从现在起一个月后)看这段代码并想知道我在做什么.

我的问题是有没有办法以标准形式实现我想要做的事情？我真的希望有更好的方法来实现这一目标.

最佳答案 我建议你让每个页面都通过调用方法来找到你想要的值.基本上暴露了查找接口.然后,您只需要从父页面调用目标页面上的方法.正确的命名将帮助开发人员了解正在发生的事情,使用方法将简化逻辑.

或者,如果您只需要从父页面获取值,那么您可以使用通用接口在iframe中为每个页面注册一个钩子.每个页面都可以调用该钩子来获取值.这可以防止您确定页面级别的复杂逻辑.就像是

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

然后每个页面都可以调用

var x = this.GetValueHook();

如果您有嵌套页面,则可以使其递归.如果您需要在所有页面之间进行通信,则使用相同的方法,但需要注册过程.每个页面都使用它的父项注册自己(和它的子项).但是如果你需要这样做,那么你应该重新评估你的架构.

例：
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>

如果您可以将其更改为使用字典/散列tbale而不是循环,那会更好.

点赞