Question

我试图隐藏一个iframe，但每次关闭它时，它都会关闭我加载到其中的页面。所以，当我点击打开iframe的按钮时，它不会再打开。这是我的代码：

<a href="#" id="vcasa1">click</a>

<div id="casa001">
<iframe frameborder="5px" width="800px" height="630px" src="http://bienesraices.wall-  fine.mx/casa001.html" name="CV-001" allowtransparency="true" style="background-color:   transparent;" scrolling="no" noresize></iframe>
</div>

我使用此功能打开iframe

$( "#vcasa1").click(function(){
      $("#casa001").slideDown(1200);
});

这是关闭它

$( "#cerrar001").click(function(){

      $("#CV-001").fadeOut(600);

});

这是＆＃34; http：//bienesraices.wall-fine.mx/casa001.html"的代码。页

<body style="background-color: transparent;">
<div id="CV-001" class="clearfix">
<div style="width:700px; height:400px;">
<div class="black2-35">

    <div style="margin-left:635px; position:absolute;">
    <a href="#" id="cerrar001">Cerrar</a>
    </div>
    <div id="title">
    <h1><strong>asdasdasasdasd</strong><h1 />
    </div>

  <h5><strong>asdasdasdasdasdsad</strong>
casaaaaaaaaaaaaaaaaaaaaaaaaaasdasdaasdadsdasdasdasasdasda
sdasdasdasdasdasdasdaasdasdasdasdasasdadsdasdasdasasdasdas
dasdadasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda</ h5>
</div>
</div>
</div>

Answer 1

尝试重新加载iFrame内容。对于不同的域名：

var iframe = $(FrameId);
iframe.attr('src', iframe.attr('src'));

如果iFrame页面位于同一个域中：

document.getElementById(FrameID).contentDocument.location.reload(true);

完整代码（实际上重新加载没有任何问题，因此您不需要重新加载）：

<html>
    <head>
        <title>hide/show iframe</title>
        <script language="JavaScript" 
                type="text/javascript" 
                src="js/jquery-1.6.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#toggleIframe').click(function(){
                    $('#myFrame').toggle('slow');
                });
            });
        </script>
    </head>
    <body>
        <button id="toggleIframe">Toggle iFrame</button>
        <iframe style="border:0px;" width="200px" height="200px" 
                    src="test1.html" id="myFrame"/>
    </body>
</html>

你是iFrame html：

<html>
    <head>
        <title>hide/show iframe</title>
        <script language="JavaScript" 
                    type="text/javascript" 
                    src="js/jquery-1.6.2.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#toggleIframe').click(function(){
                    $('.content_wrapper').toggle('slow');
                });
            });
        </script>
    </head>
    <body>
        <button id="toggleIframe">Toggle iFrame Content</button>
        <div class="content_wrapper" style="background:green;">
            <h2>All content goes here</h2>
        <div>
    </body>
</html>

这样您可以切换iFrame内容，但是您需要始终显示切换按钮，否则您无法再次显示iFrame内容。

Answer 2

试试这个

 <html>
    <head>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
    $(document).ready(function(){
    $('#show').click(function(){
        $('#frame').slideDown();
        });
    $('#show').hide();
    $('#mybtn').click(function(){
    $('#show').show();
    $('#frame').slideUp();
    });
    });
    </script>
    </head>

    <body bgcolor="#aaaaaa" style="text-align:center">
    <br>
   <a id="mybtn" href="#">click me</a>
    <br>
    <div id="frame">
    <iframe src="http://www.w3schools.com/html/default.asp" frameborder="0" name="test"    id="test"></iframe>
    </div>
    <a href='#' id='show'>Show</a>
    </body>
    </html>

Js Fiddle：http://jsfiddle.net/YVHAF/

Answer 3

您正在尝试slideDown已经打开的iframe

在这里查看Fiddle。

首先使用iframe关闭slideUp，然后使用slideDown

打开它

从打开的页面隐藏iframe

3 个答案: