zoukankan      html  css  js  c++  java
  • 【转】让Iframe自适应高度

    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:

    程序代码

    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;

    }

    }

    }

    最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

    程序代码

    <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no"></iframe>

    另一种情况的iframe解决方案(超简单)

    重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)

    之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下

    1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)

    parent.document.all("框架ID名").style.height=document.body.scrollHeight;

    parent.document.all("框架ID名").style.width=document.body.scrollWidth;

    这里的 框架ID名 就是Iframe的ID,比如:

    <IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>

    2、给你网站里所有的被包含文件里面每个都加入

    <script language = "JavaScript" src = "bottom.js"/></script>

    3、OK,收工!

    在WINXP、IE6下面测试通过。很简单吧!

    实现 iframe 的自适应高度

    实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。

    程序代码

    <script type="text/javascript">

    //** iframe自动适应页面 **//

    //输入你希望根据页面高度自动调整高度的iframe的名称的列表

    //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

    //定义iframe的ID

    var iframeids=["test"]

    //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏

    var iframehide="yes"

    function dyniframesize()

    {

    var dyniframe=new Array()

    for (i=0; i<iframeids.length; i++)

    {

    if (document.getElementById)

    {

    //自动调整iframe高度

    dyniframe[dyniframe.length] = document.getElementById(iframeids);

    if (dyniframe && !window.opera)

    {

    dyniframe.style.display="block"

    if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
    dyniframe.height = dyniframe.contentDocument.body.offsetHeight;

    else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE

    dyniframe.height = dyniframe.Document.body.scrollHeight;

    }

    }

    //根据设定的参数来处理不支持iframe的浏览器的显示问题

    if ((document.all || document.getElementById) && iframehide=="no")

    {

    var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)

    tempobj.style.display="block"

    }

    }

    }

    if (window.addEventListener)

    window.addEventListener("load", dyniframesize, false)

    else if (window.attachEvent)

    window.attachEvent("onload", dyniframesize)

    else

    window.onload=dyniframesize

    </script>

  • 相关阅读:
    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结
    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用
    jQuery UI组件库Kendo UI使用技巧小分享
    Kendo UI ListView模板功能,让Web开发更轻松
    UI组件套包DevExpress ASP.NET Core v20.2新版亮点:全新的查询生成器
    Devexpress WinForms最新版开发.NET环境配置Visual Studo和SQL Server对应版本
    全新的桌面应用数据可视化呈现方式,Sankey Diagram控件你了解多少?
    java中的递归方法
    连接数据库查询 将查询结果写入exce文件中
    java连接mysql数据查询数据
  • 原文地址:https://www.cnblogs.com/lavenderzh/p/2445505.html
Copyright © 2011-2022 走看看