2

我试图隐藏一个 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);

});

这是“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>
4

3 回答 3

0

you are trying to slideDown an iframe that already Opened

Check out Fiddle here.

First close iframe using slideUp then Open it using slideDown

于 2012-10-09T06:28:02.590 回答
0

尝试这个

 <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 小提琴：http: //jsfiddle.net/YVHAF/

于 2012-10-09T06:22:37.573 回答
0

尝试重新加载 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 内容。

于 2012-10-09T06:09:07.087 回答