iframe 高度自适应

网站中常用到富文本编辑器来编辑一些网站信息来保持信息显示时和编辑时的样式一致，有时会因复制内容使编辑的信息中含有末闭合的 HTML 标签导致在网页中输出时影响了整个页面的结构，此时我们可以用 iframe 来输出编辑的信息，即使有末闭合的 HTML 标签也不会影响到整个页面的结构。

在要显示信息的地方插入一个iframe:

<div id="ann_showtext">
    <iframe name="pro_annoucement" id="pro_annoucement" frameborder="0" width="100%" height="0" scrolling="no"></iframe>
    <textarea id="ifr_annoucement" style="display:none;"><?php echo htmlspecialchars_decode($pro['annoucement']);?></textarea>
</div>

设置 iframe 无边框，可以使 iframe 看起来不会那么突兀，就像是网页的一部分。用一个不可见的 textarea 来获取显示内容，然后使用 JS 来动态设置 iframe 的显示内容：

<script type="text/javascript">
function setAnnoucement(){
    var val = $('#ifr_annoucement').text();
    $(window.frames["pro_annoucement"].document).find("body").html(val);
	iFrameHeight("pro_annoucement");
    //$(window.frames["pro_annoucement"].document).find("body").append(val);
	iFrameHeight("pro_annoucement");
}
</script>

 $(window.frames["pro_annoucement"].document).find("body") 是找到 iframe 中的 body 标签，这样我们就可以设置 iframe 的内容了；也可以用相同方法找到 iframe 中的其它元素。

但此时我们不知道 iframe 的实际高度，故不能给它一个固定的高度，因此要让它自适应高度，代码：

<script type="text/javascript">
function setAnnoucement(){
    var val = $('#ifr_annoucement').text();
    $(window.frames["pro_annoucement"].document).find("body").html(val);
    iFrameHeight("pro_annoucement");
}
/**
 *iframe自适应高度代码
 * 
 */
function iFrameHeight(id){
    var cwin=document.getElementById(id);
    if (document.getElementById)
    {
        if (cwin && !window.opera){
	    if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
                cwin.height = cwin.contentDocument.body.offsetHeight;
	    }
	    else if(cwin.Document && cwin.Document.body.scrollHeight){
                cwin.height = cwin.Document.body.scrollHeight;
	    }
        }else{
	    if(cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
	    cwin.height = cwin.contentWindow.document.body.scrollHeight;//Opera
	} 
    }
}
</script>

可以将方法绑定到 iframe 的 onload 事件中，但是有时会因文档末完全加载而出现 onload 事件无效从而达不到想要的效果。页面代码是由上到下顺序执行， jQuery 事件的 ready(function) 方法是当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。所以我们可以把方法写入 jQuery 事件的 ready(function) 方法中达到我们想要的效果：

<script type="text/javascript" src="<?php echo $_BASE_DIR; ?>js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //将annoucement内容放入浮动框架中，并设置其高度
    setAnnoucement();
});
</script>