首页 > 电脑专区 > 电脑教程 >

iframe自适应高度(兼容多种浏览器)

来源:互联网 2023-02-21 23:11:25 475

网页开发过程中我们经常遇到需要将iframe自适应浏览器窗口高度的情况,这里我们看看怎么解决这个问题!Gaq办公区 - 实用经验教程分享!

iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

工具/原料

  • 网页编辑器Dreamweaver CS6
  • 浏览器

方法/步骤

  • 1

    我们首先创建一个iframe的测试网页,iframe的源设置为百度首页即可,其他的大家自己尝试即可。如下图。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 2

    我们设置一下页面属性,进入修改菜单,就可以看到第一个选项就是页面属性了,在外观CSS里面,我们只需要设置边距为0即可。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 3

    设置完成后,我们回到代码,这时候就会多了几行设置body的css代码了,然后我们继续编写iframe随浏览器窗口大小改变而改变的JavaScript代码。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 4

    这里src后面我们使用的是百度的网址,大家跟着用测试一下即可,替换也行。窗口的大小改变事件是onresize事件,我们在这里执行我们的额iframe高度更改函数即可。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 5

    然后我们先看看如果我们注释掉iframe随窗口改变的代码,如下图,可以看到结果是窗口变大了,但是iframe没有变大,导致页面显示不完整。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 5该信息未经许可获取自百度经验
  • 6

    接着我们恢复代码,就可以看到页面显示完整了,如下图。这里我们的宽没有设置很好,仅仅作为测试高度自适应用。Gaq办公区 - 实用经验教程分享!

    iframe自适应高度(兼容多种浏览器)Gaq办公区 - 实用经验教程分享!

  • 注意事项

    • 注意iframe随窗口大小变化

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Gaq办公区 - 实用经验教程分享!


    标签: 浏览器适应高度浏览

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码