1. 爱易网页
  2. JavaSript
  3. JS+Jquery iframe跨浏览器自适应高度有关问题(笨人的方法)

JS+Jquery iframe跨浏览器自适应高度有关问题(笨人的方法)

日期：2014-05-16　 浏览次数：20439 次

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>

相关资料更多>

  1. jq 读取带id值的input元素,该如何解决
  2. with (field) 这叫什么话语啊
  3. 一个jscript的有关问题，帮忙哈
  4. 正则替换类似QQ的表情
  5. 纯js兑现的软键盘
  6. JS 获取指定品种选择器的所以样式值
  7. 庖丁解牛——由企业级应用与网站的疑惑想到的~该怎么处理
  8. 問個$F的問題解决方法
  9. js封存几位小数