zoukankan      html  css  js  c++  java
  • 使Iframe的宽高自适应,并且兼容IE 和NC浏览器

    1,适应内容自动扩展,在parent页面上加处理script:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script language=JavaScript>
    function autoResize(){
    try{
    document.all["content"].style.height=content.document.body.scrollHeight;
    document.all["content"].style.width=content.document.body.scrollWidth;
    }
    catch(e){}
    }
    </script>

    <style type="text/css">
    <!--
    body {
    margin-left: 100px;
    margin-top: 100px;
    margin-right: 100px;
    margin-bottom: 100px;
    background-color: #CCCCCC;
    }
    -->
    </style></head>

    <body>
    <iframe name="content" style="aho:expression(autoResize())" width="100%" frameborder=0 src="1.htm" scrolling=no></iframe>
    </body>
    </html>

    2.在引用的文件上加script

    function changeIframeHeight() //自动改变 Iframe 的高度
    {
    if(top != self)
       window.parent.document.getElementById(self.name).height = document.body.scrollHeight;
    }

    function window.onload()
    {
       changeIframeHeight(); //改变 Iframe 高度
    }

    把上面那个放到需要自适应的页面中,用javascript套用就可以了

    实际上只需要做第一步就OK了,在子页面可以不用添加任何JS代码即可实现

  • 相关阅读:
    博客推荐
    2018
    2018
    学习推荐-Postgresql学习手册
    学习推荐-Redis学习手册
    odoo开发笔记 -- odoo源码解析
    前沿技术相关
    odoo开发笔记-tree列表视图拖拽排序
    odoo开发笔记-日期时间相关操作
    odoo开发笔记 -- 官方模块一览表
  • 原文地址:https://www.cnblogs.com/zxjyuan/p/1273420.html
Copyright © 2011-2022 走看看