iframe放大显示_iframe操作 调整大小

在我们做网页的时候，经常会用到iframe,它很向asp.net中的母板，但是比母板更加的灵活好用。在配合jquery后，会实现很强大的效果，像Tab控件的效果啊等等。第一篇开发经验笔记，还是不说那么多了。进入主题。

我们根据不同的单击焦点在同一个iframe中打开不同的网页时，往往都需要去动态的改变iframe的大小。我们都知道去改变它的height,但是往往得不到想要的效果。先说说几种实现的方法：

首先，触发转到子页面的函数，这个我们需要改变iframe的src的值，可以写在click事件或者mouseover事件或者mousedown事件等等中。

var iframe1 = window.parent.document.getElementById("iframeID");

iframe1.src="要转到的子页面";

接下在就是在改变子页面的大小。这里分为两种(我知道的)：在触发转到子页面的页面写，还有一种是直接在子页面写。

一、在触发转到子页面的页面写，据我所知，这种方法可以实现，但是没有第二种好，使用条件有限

在用jquery时，我们知道它是在页面加载时先加载jquery,然后加载其它内容，我们在触发一个事件时，只是改变了缓存中的值，要在触发第二个事件时，第一次触发的值才会真正的显示出来。那么只用一个click去触发，只能转到子页面，但是不能改变iframe的大小，这里，我用两个函数去触发，mousedown和mouseup

例：$("#buttonID").mousedown(function(){

//转到子页面的函数

resizeFrame();//改变大小的

})

.mouseup(function(){

resizeFrame();//将缓存中修改的值显示到页面，即实现iframe大小改变的效果

})

但是，这种方法有一定的缺陷，因为响应函数是需要一定的时间的，不同的浏览器相应的时间不同，这样会照成鼠标单击过快而使mouseup()函数来不及相应。

二、直接在子页面写改变iframe大小的函数，这种方法可以避免第一种响应时间的问题

在子页面中的javascript中加入

function resizeFrame(){

//改变iframe大小的代码

}

然后在页面加载时触发

接下来说改变iframe大小的函数

1、我的方法是：

function resizeFrame(){

var content_iframe = window.parent.document.getElementById("iframeID");//获取iframeID

var div_height = parseInt($(content_iframe).contents().find("子网页ID").css("height"));//使iframe高度等于子网页高度

content_iframe.height = div_height + 100;

}

在网上有人说可以不用获取iframe的ID，也不用获取子网页的ID，但是这种方法我用了一下，没有打到预期的效果

function resizeFrame(){

frameElement.width = document.documentElement.clientWidth;

frameElement.height= document.documentElement.clientHeight;

}

有什么错误的地方，欢迎指出。