zoukankan      html  css  js  c++  java
  • iframe自适应大小

    <script language="javascript">
    <!--
    function SetWinHeight(obj)
    {
    var win=obj;
    if (document.getElementById)
    {
    if (win && !window.opera)
    {
       if (win.contentDocument && win.contentDocument.body.offsetHeight)
        win.height = win.contentDocument.body.offsetHeight;
       else if(win.Document && win.Document.body.scrollHeight)
        win.height = win.Document.body.scrollHeight;
    }
    }
    }
    -->
    </script>


    <iframe width="200" src="/1.html" id="JKPlus_win" name="JKPlus_win" scrolling="no" frameborder="0" onload="Javascript:SetWinHeight(this)"></iframe>

    在有些时候,我们使用iframe来将一个页面嵌入到另一个页面中,但是由于这个页面的高度不固定,所以嵌入那个页面会出现滚动条。这种方式的解决办法是使用iframe自适应大小,让嵌入页中不出现滚动条。
    <iframe name=ifm2 width="100%" onload="style.pixelWidth=ifm2.document.body.scrollWidth;this.style.pixelHeight=ifm2.document.body.scrollHeight" src="./news2.asp?id=1" frameBorder=0 scrolling=no></iframe>

    有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面的内容高度是未知的,所以大家都会利用javascript来解决这个问题。
    在网上曾看见过解决此问题的代码,不过拷贝到本地进入调试时有些不正常,在IE下无法正确获得嵌套页面的高度,通过各种尝试,最终代码如下:

    1. <script type="text/javascript">
    2. function SetCwinHeight(iframeObj){
    3. if (document.getElementById){
    4.    if (iframeObj && !window.opera){
    5.    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){
    6.    iframeObj.height = iframeObj.contentDocument.body.offsetHeight;
    7.    }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){
    8.    iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight;
    9.    }
    10.    }
    11. }
    12. }
    13. </script>
    14. <iframe width="100%" name="frameContent" onload="SetCwinHeight(this)" frameborder="0" src="*"></iframe>

    扩展:

    在一个页面含有某个iframe,其id="myframe" name="myframe",此时使用document.getElementById("myframe")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。

  • 相关阅读:
    MVVM架构~knockoutjs系列之验证信息自定义输出~再续
    数据挖掘:实用案例分析
    实际中碰到的一个异构系统之间数据交换的处理方式设计
    连载:现代无线电接收机的系统噪声系数分析一 级联接收机的计
    hadoop的一些名词解释
    【ArcGIS 10.2新特性】ArcGIS 10.2 for Desktop 新特性(一)
    Visual Studio Tips: How to change project namespace
    PHP 类属性 类静态变量的访问
    ios日历视图实现日期输入
    简说一下coffeescript的constructor是如何导致Backbone.View的事件无法正常工作的.
  • 原文地址:https://www.cnblogs.com/zzxap/p/2175987.html
Copyright © 2011-2022 走看看