JS+Jquery iframe跨浏览器自适应高度有关问题(笨人的方法)
日期：2014-05-16 浏览次数：20394 次
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>
先说一下，下面代码的前提，主页面主要用于导航的切换，而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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
