从iframe调用Parent函数,然后更新iframe表单值

时间:2012-07-18 15:57:13

标签: javascript jquery html iframe

我在父页面中有一个需要由iframe调用的函数,然后此函数更新iframe中的表单值。我可以调用函数,但表单值更新不起作用

我设置了一个警报,看看父函数是否可以看到输入值,但返回undefined,所以我假设我没有正确访问ID

这是我的代码尝试在分为三个文本框的字段中自动初始化今天的日期

主要js功能

 window.autoPartialDateBox = function(htmlID) {
if ( !jQuery('#'+htmlID+"_mm").val() && !jQuery('#'+htmlID+"_dd").val() && !jQuery('#'+htmlID+"_yy").val() ) {
            var myDate = new Date();    
            jQuery('#'+htmlID+"_mm").val(myDate.getMonth()+1 );                      
            jQuery('#'+htmlID+"_dd").val(myDate.getDate() ); 
            jQuery('#'+htmlID+"_yy").val(myDate.getFullYear() );               
} }

iframe

    <script type="text/javascript"> 
   $(function () {
        // this will populate the partial date box          
           $("#someElement").live("change", function() {
               if ($(this).val() == 'trigger') {
                window.top.autoPartialDateBox('partial_date_box');
               }

           });

        });
    </script>

Action <select name="someElement" id="someElement" class="valid">
    <option value="" selected="">Select an option</option> 
    <option value="trigger">Trigger</option>            
</select>

Day <input name="stop_dd_2747_mm" type="text" id="stop_dd_2747_mm">
Month <input name="stop_dd_2747_dd" type="text" id="stop_dd_2747_dd" >
Year <input name="stop_dd_2747_yy" type="text" id="stop_dd_2747_yy" >

1 个答案:

答案 0 :(得分:0)

如果您认为问题是访问ID,可能是因为您试图在jQuery选择器中“构建”ID。我认为更好的解决方案是将函数传递给父元素,然后横向节点树来查找输入字段。

功能:

 window.autoPartialDateBox = function(parentElm) {  

     $nodes = jQuery(parentElm).children('input[type=text]');

     if (!$nodes[0].val() && !$nodes[1].val() && !$nodes[2].val()) {


        var myDate = new Date();    
        $nodes[0].val(myDate.getMonth()+1 );                      
        $nodes[1].val(myDate.getDate() ); 
        $nodes[2].val(myDate.getFullYear() );               
  } 
 }

为输入字段添加容器:

<div id="input_container">
   Day <input name="stop_dd_2747_mm" type="text" id="stop_dd_2747_mm">
   Month <input name="stop_dd_2747_dd" type="text" id="stop_dd_2747_dd" >
   Year <input name="stop_dd_2747_yy" type="text" id="stop_dd_2747_yy" >
</div>

我还没有测试过,但这是我会做的一般方法。如果您尝试在选择器中构建一个字符串,我不知道jQuery的行为。它似乎不是一个问题,但你永远不会知道。

编辑在jQuery名称空间中声明'nodes'