css - div 标签和 iframe

Question

我正在寻找一种方法来使内容div在单击时可扩展iframe以正确显示iframe内容，代码是：

<div id="content">
  <div id='outerdiv'>
    <iframe src="http://mywebsite.com" id='inneriframe' scrolling="no"></iframe>
  </div>
</div><!-- end of content -->

CSS是

#content
{
  width: 790px;
  height:auto;
  padding: 5px 55px 0;
}

#outerdiv
{
  width:790px;
  height:446px;
  overflow:hidden;
  position:relative;
}

#inneriframe
{
  position:absolute;
  top:-268px;
  left:-230px;
  width:1280px;
  height:1198px;
}

任何建议，将不胜感激。

Answer 1

首先我们必须清理你的 CSS 代码：

#iframe{
    position: absolute;
    width: 100px;
    height: 100px;
}

现在我们必须在 Jquery 中写一些：

var iframeDoc = $('#iframe').contents().get(0);

var start = "big";
$(iframeDoc).bind('click', function( event ) {
    if(start == "big"){
        $("#iframe").animate({width:"100%", height:"100%"}, 1000);
        return start = "small";
    } else if(start == "small") {
        $("#iframe").animate({width:"100px",height:"100px"},1000);
        return start = "big";
    }
});

利用：

<iframe id="iframe" src=""></iframe>

JSFiddle：http: //jsfiddle.net/YuWSy/