CSS完美实现iframe高度自适应

CSS完美实现iframe高度自适应CSS 完美实现 iframe 高度自适应 支持跨域 Iframe 的强大功能偶就不多说了 它不但被开发人员经常运用 而且黑客们也常常使用它 总之用过的人知道它的强大之处 但是 Iframe 有个致命的 BUG 就是 iframe 的高度无法自动适应 这一点让很多人都头疼万分 百度或是谷歌一下 确实很多解决方法 但尝试一下 会发现问题很多 浏览器兼容性差 不能自适应 仅支持同域 Iframe 等诸多问题 尤其是跨域 I

CSS完美实现iframe高度自适应(支持跨域)

Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多人都头疼万分。百度或是谷歌一下,确实很多解决方法,但尝试一下,会发现问题很多:浏览器兼容性差,不能自适应,仅支持同域Iframe等诸多问题,尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行的方案(唯一有一种提到加入代理页面的,经过测试发现无用)。难道真的没有一种可行的解决方案了吗? No,代码如下:

代码强大之处:

1.该方法完美兼容IE6,7,8 ,Fire fox,chrome,opera 等主流的浏览器;

2.同域,跨域皆支持;

3.不调用任何JS脚本;

注意三点.

1. 文件开头不能是:

必须 是开头

(ps貌似不用也好使了)

2. body样式中的 overflow: hidden; 绝对不对省略;

3. Iframe 中的 height=’100%’ 以及 滚动条不能设为no(默认是yes,不用设置即可)

转自:https://www.cnblogs.com/leolovexx/p/6832054.html








































版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/228044.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午7:57
下一篇 2026年3月16日 下午7:57


相关推荐

  • k3s安装与部署

    k3s安装与部署一 k3s 介绍 1 1 什么是 k3s 中文网站 快速入门指南 Rancher 文档 k3s 是经过 CNCF 认证的由 Rancher 公司开发维护的一个轻量级的 Kubernetes 发行版 内核机制还是和 k8s 一样 但是剔除了很多外部依赖以及 K8s 的 alpha beta 特性 同时改变了部署方式和运行方式 目的是轻量化 K8s 简单来说 K3s 就是阉割版 K8s 消耗资源极少 它主要用于边缘计算 物联网等场景 K3s 具有以下特点 1 安装简单 占用资源少 只需要 512M 内存就可以运行起来

    2026年3月19日
    1
  • qq群大数据可视化查询_QQ数据库

    qq群大数据可视化查询_QQ数据库2009年QQ群关系数据库可视化查询器优化推广获客神器十年老数据库最近很多人问这个QQ群关系数据库的事儿,拉出来聊一聊,顺带做了部分优化之前这个是被很多大神玩丢下来的东西,近几年手游市场的兴起,又成了手游市场的获客神器2012年之前封存的群关系数据,收录了将近8000万条群组信息,包含各种行业群,交友群,游戏群,手游推广的主要客户群体还是来源于游戏相关的群。简单讲,就是通过QQ群关系数据库,获取十年前的端游客户,从而转化为手游的消费者。为何要用这么

    2022年10月2日
    8
  • MySQL自增主键auto_increment原理 与 自增主键出现间隙不连续现象的定位

    MySQL自增主键auto_increment原理 与 自增主键出现间隙不连续现象的定位

    2021年10月5日
    60
  • Kafuka面试(整合Kafka两种模式区别)

    Kafuka面试(整合Kafka两种模式区别)整合Kafka两种模式说明★面试题:Receiver&Direct开发中我们经常会利用SparkStreaming实时地读取kafka中的数据然后进行处理,在spark1.3版本后,kafkaUtils里面提供了两种创建DStream的方法:1.Receiver接收方式:KafkaUtils.createDstream(开发中不用,了解即可,但是面试可能会…

    2022年5月31日
    54
  • [Android] [逆向工程] 安卓逆向入门篇

    [Android] [逆向工程] 安卓逆向入门篇掌握逆向工程可以带给你哪些技能 抓取 APP 内容 制作套壳包拦截 APP 数据 激活成功教程单机游戏修改游戏属性行为 加强反逆向的防范意识逆向手段介绍我了解到的安卓逆向有复现工程 侵入工程 注入工程三种手段 复现工程复现工程是指通过工具将 APK 转换为 Android 工程 并对 Android 工程的配置项修复使其可以正常运行 只要工程可以被成功复现接下来就可以为所欲为了 事实上并不是所有工程都可以被成功复现 而且需要花费大量的时间去复原工程 这也非常考验开发人员的耐心和技术经验 侵入工程侵入工程

    2026年3月17日
    2
  • idea2021激活码【2021免费激活】「建议收藏」

    (idea2021激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月22日
    497

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号