iframe没有使用JQuery隐藏

时间:2014-06-09 04:20:44

标签: javascript jquery iframe show-hide

在我的页面中,我有一个带有另一个div和iframe的div,如下所示。

<div class="v_dissc_tab" id="tabs-1">
    <div id="publicevent">
    <div class="crtraone" style="margin-left:800px;">
        <button onclick="addpublic()">Add New</button>
    </div>
    <div>
        <table width="100%">
        <tr>
            <td><b>Programme</b></td>
            <td><b>Scheduled Start Time</b></td>
            <td><b>Scheduled End Time</b></td>
            <td><b>Amount</b></td>
            <td><b>Status</b></td>
            <td></td>
        </tr>
        <tr>
             <?php if($publicnum>0)
             {

             }
             else 
             { ?>                                                                          
                        <td colspan=6>                                                                
                          <?php echo "No any public channel programmes";?>                                                      
                        </td>
            <?php }?>
        </tr>
        </table>
          </div>
    </div>
    <iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
        </iframe>
</div>

在页面加载时,将显示ID为publicevent的div,并隐藏iframe。当我点击添加新按钮时,将加载iframe。在iframe中我正在加载另一个包含按钮的页面

<button onclick="managepublic()">Manage Public Events</button>

点击此按钮,我想显示ID为publicevent的div,并希望隐藏iframe(就像首次加载页面时一样)。下面显示的是managepublic()

function managepublic()
    {
        location.reload();  // not making any changes
        //$('#publicevent').show(); Tried with this also
       //$('#calendarframe').hide();
    }

任何人都可以帮我解决这个问题。提前谢谢。

3 个答案:

答案 0 :(得分:1)

不要'使用location.reload,只使用以下代码

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script> 

      function managepublic()
            {

               $('#publicevent').show(); 
               $('#calendarframe').hide();
            }

答案 1 :(得分:1)

  

单击此按钮,我想显示id为publicevent的div   并希望隐藏iframe(就像首次加载页面时一样)。

检查这是否有帮助。

$('iframe').attr( "src", "http://www.apple.com/");

$('iframe').load(function() {
    $('iframe').show()
    $('#loaded').hide();


});

$('#button').click(function() {
    $('#loaded').show();
    $('iframe').hide();
});

JSFiddle

答案 2 :(得分:0)

请尝试以下代码段。

您指的是<iframe>父母的元素。

function managepublic(){
    $('#calendarframe', window.parent.document).hide(250, function() {
        $('#publicevent', window.parent.document).show();
    });
}

或者

function managepublic(){
        window.parent.$('#calendarframe').hide(250, function() {
        window.parent.$('#publicevent').show();
    });

}

或更改隐藏事件的顺序。

function managepublic(){
        window.parent.$('#publicevent').show();
        window.parent.$('#calendarframe').hide();

}

注意

  • 为此,父母必须包含jQuery。
  • 如果父级位于不同的域中,则无效。