框架高度自适应

最新推荐文章于 2015-11-05 21:41:00 发布

我已开始练习

最新推荐文章于 2015-11-05 21:41:00 发布

阅读量517

点赞数

分类专栏： web前端文章标签： Iframe框架高度自适应 html高度自适应

本文链接：https://blog.csdn.net/wujie_cnhn123456/article/details/44237001

版权

web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、父窗口代码
<iframe id="_case" src="case.html" width="300" frameborder="0" scrolling="no" ></iframe>

二、子窗口代码
<div id="relation" style="padding-top:10px;" >
文字内容
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
var h=$("#relation").height()+30;
$(window.parent.document).find("iframe[id='_case']").height(h);
});
</script>

备注【var h=$("#relation").height()+30;】的 +30 是ifarme部分其他元素的height

-------------------------下面是自己写的实例-------------------------

【index.html 、 1.html 、 2.html 、 3.html 、jquery-1.9.1.min.js 都在同一目录下】

----------------------------------------index.html----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>index.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    window.onload = function()
   {

       $("#butt1").mouseover(function()
       {
           $("#_case").attr("src","1.html");

       }).mouseout(function()
       {

       })

      $("#butt2").mouseover(function()
       {
            $("#_case").attr("src","2.html");
       }).mouseout(function()
       {

       })

       $("#butt3").mouseover(function()
       {
            $("#_case").attr("src","3.html");
       }).mouseout(function()
       {

       })
   }
</script>
</head>

<body>
    <div>

    <input type="button" id="butt1" value="butt1" />
    <input type="button" id="butt2" value="butt2" />
    <input type="button" id="butt3" value="butt3" />
    </div>
    <iframe id="_case" src="/1.html" width="300" frameborder="0" scrolling="no" >
    </iframe>
    <div>
    iiiiiiii<br/>
    iiiiiiiiiiii<br/>
    iiiiiiiii<br/>
    iii<br/>
    iiiiiiii<br/>
    i2<br/>
    iiiiiiiiiiiiiiiiiiiiiiii<br/>
    iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii<br/>
    </div>
</body>
</html>

---------------------------------------------1.html-----------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
    <script src="jquery-1.9.1.min.js"></script>
   <script language="javascript">
   $(document).ready(function() {
        var h=$("#relation").height()+30;
        $(window.parent.document).find("iframe[id='_case']").height(h);
   });
   </script>
</head>

<body>
    <div id="relation" style="padding-top:10px; background-color: red;" >
   文字内容
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
    111<br/>
   </div>

</body>
</html>

------------------------------------------------2.html--------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    
    <script src="jquery-1.9.1.min.js"></script>
   <script language="javascript">
   $(document).ready(function() {
        var h=$("#relation").height()+30;
        $(window.parent.document).find("iframe[id='_case']").height(h);
   });
   </script>
</head>

<body>
<div id="relation" style="padding-top:10px; background-color: red;" >
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
    222<br/>
</div>
</body>
</html>

-------------------------------------------------3.html-------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
    <title>3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="jquery-1.9.1.min.js"></script>
   <script language="javascript">
   $(document).ready(function() {
        var h=$("#relation").height()+30;
        $(window.parent.document).find("iframe[id='_case']").height(h);
   });
   </script>
</head>

<body>
<div id="relation" style="padding-top:10px; background-color: red;" >
    333<br>
    333<br>
    333<br>
    333<br>
    333<br>
</div>
</body>
</html>