• 技术文章 >web前端 >H5教程

    HTML教程:如何设置Iframe自适应高度

    2016-05-17 09:07:59原创744
    不带边框的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解决方案
    重要提示:
    src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)现在给大家分享一下:

    1、建立一个bottom.js的文件,然后输入下面的代码;
    parent.document.all("框架ID名").style.height=document.body.scrollHeight;
    parent.document.all("框架ID名").style.width=document.body.scrollWidth;

    2、给你网站里所有的被包含文件里面每个都加入,在WINXP、IE6下面测试通过;

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

    程序代码

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:LESS-Middleware:Node.js 和 LESS 的完美搭配 下一篇:基于HTML5制作在线上海地铁图
    PHP编程就业班

    相关文章推荐

    • html5离线存储有哪些• 深入解析asp.net中mvc4自定义404页面(分享)• h5新增标签audio与video的使用• 你值得了解的HTTP缓存机制(代码详解)• 使用HTML5 SVG绘制各种雪花图案

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网