读书人

JS+Jquery iframe跨浏览器自适应高度

发布时间: 2012-10-28 09:54:44 作者: rapoo

JS+Jquery iframe跨浏览器自适应高度问题(笨人的方法)
先说一下,下面代码的前提,主页面主要用于导航的切换,而childIframe.jsp页面中的iframe这个是关键,在这个页面中所有的文章名字的链接在点击的时候都从数据库动态的加载文章并且在childIframe.jsp页面中的iframe中显示,这样你就要使用JS来修改id="childifram"的ifame的src数据源.这个数据源可以是一个url(web/getNote.action),这个url执行后的返回页面就是note.jsp,用来展示文章的页面。这样我们就可以根据不同参数取出不同文章,且显示在同一个iframe中。

mainIfram.jsp

<html>

主页面

<iframe id="mainifram" name=” ifram_order” frameborder="0" scrolling="no" src="childIframe.jsp" width="100%" height="850"></iframe>

</h tml>



childIframe.jsp

<html>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

function getNote(noteId){

$("#childifram").attr("src","web/getNote.action?noteId="+noteId);

}

</script>

<a herf="javascrpit:getNote(1)">日志1</a><a herf="javascrpit:getNote(2)">日志2</a> ......

<iframe id="childifram" frameborder="0" scrolling="no" src="note.jsp(或都是URL:web/getNote.action)" width="100%" height="850"></iframe>

</html>



note.jsp

解决方法:

在每次加载最小单元的页面note.jsp中默认加载一个JS方法:

<body>

<head><title>文章展示页</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function(){

changParentParentIframeHeigth();

})

function changParentParentIframeHeigth(){

var iframe = window.parent.parent.document.getElementsByName("ifram_order");

var h = document.body.scrollHeight;

$(iframe).attr("height",h+200);

}

</script>

</head>

<html>

最终小页面:文字500行,从数据库中获取,每篇文章高度不等

</html>

</body>

读书人网 >JavaScript

热点推荐