javascript 中iframe高度自适应(同域)实例详解


Posted in Javascript onMay 16, 2017

javascript 中iframe高度自适应(同域)

       今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码:

function SetCwinHeight(){

     var iframeid = document.getElementById("frame");  //frame是iframe的id

     if (document.getElementById) {
      if (iframeid && !window.opera) {
        if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {

         iframeid.height = iframeid.contentDocument.body.offsetHeight;

        }else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
         
         iframeid.height = iframeid.Document.body.scrollHeight;
         
        }
      }
     }

             iframe嵌入页面时需要等待它完全加载完后才可以调用SetCwinHeight(),所以当修改iframe里的src值时,也需要等待修改的页面完全嵌入后才可以调用SetCwinHeight(),这样才有效果,那么该怎么放置SetCwinHeight(),我的解决方法是在iframe标签里直接调用,即这样写 <iframe onload = "SetCwinHeight();"></iframe>,但是这样的的话会污染了html环境,可是在js中一般只用一次window.onload = function(){},如果使用多次,后面的会覆盖前面的,所以目前为止我能想到的解决方法就这一个,

      当嵌入页面修改时,iframe的高度也需要调整,当我在js文件直接这样window.onload = function(){SetCwinHeight();}调用SetCwinHeight()时,只有刷新整个页面才可以自适应高度,如果修改了iframe的src,iframe的高度还是前一个页面的高度,当前页面的高度无法自适应,一开始我以为是SetCwinHeight()写错了,但是当刷新整个页面时,当前页面又可以自适应了,在遇到这个问题之后,我的焦急毛病又出现了,总是没有分析问题就急急忙忙的去查找有关于问题的解决方法,然后查出来的又文不对题,这样反反复复,不仅浪费了时间,还使得自己的心情特别烦躁,这样的话工作就无法再进展下去。通过了这次的工作明白了自己的毛病,在休息了一会后,重新静下心来整理思路,然后分析出现的问题,程序如何运行,点击后程序运行的步骤又是什么,分析完后再看看是哪一步出错了,为什么会出错,像这次出现的错误,并不是程序写错了,而是程序运行的步骤出错了,整个页面刷新后就可以实现效果,但是修改src后又没有效果了,而window.onload = function(){}这一步是等待页面完全加载完后才执行,那么应该就是加载的问题了,所以需要等待页面加载完后才可以调用SetCwinHeight(),通过这样的分析,最后终于将问题解决了,经过这次,我一定要改掉急躁这个毛病,应该在遇到问题后,先分析问题和思考解决方法,如果自己解决不了再去查找相应的解决方法。这样就不会浪费时间和精力了。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
原生JS轮播图插件
Feb 09 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 #Javascript
Vue.js tab实现选项卡切换
May 16 #Javascript
Vue.js手风琴菜单组件开发实例
May 16 #Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 #Javascript
js自定义瀑布流布局插件
May 16 #Javascript
简单实现js点击展开二级菜单功能
May 16 #Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 #Javascript
You might like
PHP配置心得包含MYSQL5乱码解决
2006/11/20 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python检测数据类型的方法总结
2019/05/20 Python
python实现ip地址的包含关系判断
2020/02/07 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
顶撞领导检讨书
2014/01/29 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
美容院合作经营协议书
2014/10/10 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
如何书写邀请函?
2019/06/24 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
MySQL七种JOIN类型小结
2021/10/24 MySQL