zoukankan      html  css  js  c++  java
  • 实现iFrame自适应高度,原来非常简单!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <iframe id="ifream" name="ifream" src="b.htm" width="100%" frameborder="0"></iframe>
    </body>
    </html>

    b.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <title>无标题页</title>
    </head>
    <body>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>无标题页</title>
    </head>
    <body>
    我是嵌套页面,我想自适应高度。看着我啊
    <script>
    jQuery(
    function () {
    parent.document.getElementById(
    "ifream").style.height = jQuery(document).height()+"px";
    });
    </script>
    </body>
    </html>

    看到了吧,关键就在于

      1.frameborder="0"

      2.parent.document.getElementById("ifream").style.height = jQuery(document).height()+"px";

  • 相关阅读:
    时间加减天数
    时间加减秒数
    什么BOM?
    js 事件基础
    js 九九乘法
    CSS3 动画基础单词语法
    css3 3D转换 基础语法
    css3 2D 转换 基础语法
    js onchange案例
    js之冒泡排序
  • 原文地址:https://www.cnblogs.com/skykang/p/2245967.html
Copyright © 2011-2022 走看看