Question

我正在定制Denis Gritcyuk的Popup date picker。

此弹出式脚本在href链接中使用内联Javascript，将所选日期设置为父窗口中被调用的input字段。示例网址如下所示：
```
<a href="javascript:window.opener.document.formname.field.value='03-10-2011';
         window.close();">3</a>
```
输入字段名称（例如document.formname.field）将作为字符串参数传递给脚本。

我想在点击该链接时添加完成的内容（例如，更改字段的背景颜色，设置标记等）。因此，虽然这可行，但它很快就会变得丑陋。

<a href="javascript:window.opener.document.formname.field.value='03-10-2011';
         window.opener.document.formname.field.style.backgroundColor='#FFB6C1'; 
         window.close();">3</a>

如何将这些内联命令移动到JS函数中？这会给我更清晰的URL和代码。该URL现在看起来像

<a href="javascript:updateField ('document.formname.field', '03-10-2011');">3</a>

有一个函数（这个例子显然不起作用）：

function updateField (str_target, str_datetime) {
    var fieldName = "window.opener" + str_target;
    [fieldName].value = str_datetime;
    [fieldName].style.backgroundColor = '#FFB6C1';
    // Set flag, etc.
    window.close();
}

左那么，有关如何做到这一点的任何建议吗？

Answer 1

你错误地进入了这个属性。尝试：

function updateField (str_target, str_datetime) {
    var fieldName = window.opener;
    str_target = str_target.split('.');
    for (var i = 0; i < str_target.length; i++)
        fieldName = fieldName[str_target[i]];
    fieldName.value = str_datetime;
    fieldName.style.backgroundColor = '#FFB6C1';
    // Set flag, etc.
    window.close();
}

括号表示法（[]）仅用于对象的属性，而不是对象本身。如果您发现我的帖子有帮助，请投票支持。

Answer 2

您可以使用eval函数构建字符串并将其评估为代码，但我建议不要使用它。

您的代码存在一些问题：

你不能在全局上下文中使用[]运算符，你必须在一个对象上加上后缀，所以你可以说window["opener"]这相当于window.opener，但那里不仅仅是["window"]
导航嵌套属性时，如window.opener.document中所示，您无法使用[]运算符导航多个级别。即window["opener.document"]是不允许的。您必须改为使用window["opener"]["document"]。

Answer 3

我更喜欢隐藏从当前窗口回溯到开启者的dom路径。将该函数烘焙到函数中是合适的，因为函数将始终在该子弹出窗口的上下文中使用。然后您的函数调用更清晰，更易读。显然，将“myField”替换为您要更新的字段的ID。

<a href="javascript:window.opener.updateField( '03-10-2011', 'myField' );">3</a>

function updateField ( str_date, str_fieldname ) {

    var fieldToUpdate = document.getElementById( str_fieldname );

    fieldToUpdate.value = str_date;
    fieldToUpdate.style.backgroundColor = '#FFB6C1';

    // Set flag, etc.
    window.close();

}

将内联代码移动到函数中，并生成对象名称

3 个答案: