CSS完美实现iframe高度自适应（支持跨域）

于 2018-08-14 16:44:13 发布
阅读量1.2k 收藏 1
点赞数
文章标签： iframe

<html>
<head>
<style>
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}
</style>
</head>

<body>
<iframe src='" http://www.baidu.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe>

</body>

</html>

 

代码强大之处：

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

2.同域，跨域皆支持；

3.不调用任何JS脚本；

注意三点.

1. 文件开头不能是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 

必须 是<html xmlns="http://www.w3.org/1999/xhtml">开头

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

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

简单试了一下，height使用双引号无效！

qq_34293842
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
iframe跨域常用问题和iframe页面自适应
08-20
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
有些开发者可能会选择使用jQuery或者其他JavaScript库提供的插件，这些插件已经封装了跨域高度自适应的逻辑，如`jquery.iframe-auto-height`等，使得实现过程更为简便。 总结来说，解决iframe跨域高度自适应问题的...
iframe高度自适应
03-15
对于跨域的`iframe`，可以采用定时器和`window.postMessage` API来实现高度自适应。在`iframe`的父页面上，我们可以监听`message`事件，然后根据接收到的消息调整`iframe`的高度。在`iframe`内部，加载完成之后，...
Iframe 高度自适应浏览器高度
03-28
然而，当Iframe的内容动态变化或者内容长度超过预设的高度时，我们就需要实现高度自适应。有几种常见的方法可以实现这一目标： 1. **JavaScript/jQuery**： 一种常见的方法是使用JavaScript或jQuery监听页面的...
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文).zip
08-06
[毕业设计]VB开发的高校题库与考试管理系统(源代码+论文)
mysql-9.0.1-winx64-debug-test.zip
08-06
mysql
java-springboot+vue疗养院管理系统实现源码(项目源码-说明文档)
08-06
java-springboot+vue疗养院管理系统 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
java-springboot+vue教学辅助平台实现源码(项目源码-说明文档)
08-06
java-springboot+vue教学辅助平台 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：Springboot 前端技术：Vue、HTML5、css、JavaScript 关键技术：springboot、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
蚂蚁人工智能综合应用系统前端
08-06
目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI大模型等的综合人工智能应用系统目标通过java+python方式，实现含视频检测、视频分类、语音生成、文生图、图文检索、chatgpt、chatglm、stable-diffusion、数字人等最新主流AI
rx_a1_analysis.v
08-06
rx_a1_analysis
GolangM-Classify-mas笔记
08-06
GolangM-Classify-mas笔记
5G智慧灯杆及合杆解决方案.pptx
08-06
5G智慧灯杆及合杆解决方案.pptx
[毕业设计]VB+Access高校部门干部资料管理系统(源代码+论文).zip
08-06
[毕业设计]VB+Access高校部门干部资料管理系统(源代码+论文)
ruoyi-vue-pro定时任务
08-06
定时任务·
毕业设计，基于ASP+ACCESS开发的酒店预定管理系统，内含完整源代码，数据库，开题报告，毕业论文
08-06
毕业设计，基于ASP+ACCESS开发的酒店预定管理系统，内含完整源代码，数据库，开题报告，毕业论文 在高节奏生活的今天，人们整天在各个城市穿梭忙碌着，在过去跑到哪个城市后才能进行预定客房，现在看来是否显得太麻烦,目前很多酒店都已经开始使用通过互联网进行客房预订系统。这样进行酒店的管理就显得更加的轻松。宏都大酒店虽然已经实施了内部的c/s结构的酒店客房管理系统，但是仍然存在上述所说的问题。于是我试着帮他们制作开发能在网上实现预订客房的系统。 宏都大酒店管理信息系统中不能通过互联网方式进行客房预订，通过本次设计主要实现通过互联网方式进行客房预订。让客户足不出户坐在家里就能预订出自己想要的客房。主要功能有：酒店简介、客房简介、客房报价、客房预订信息提交，预订信息查询及修改，删除，等等）管理员信息查询、回复预订信息等功能，真正实现酒店的无纸化，电子信息化、无距离限制的进行客房信息的预订。 本软件的后台数据库也采用微软公司的大型数据库SQLSERVER，与原C/S系统的数据库SQLSERVER相同，进行了一次无缝链接，也就是说在原有SQLSERVER数据库上面进行适当的添加表，使得能保持在原
Huawei USG6000F-V600R023SPH120
08-06
Huawei USG6000F_V600R023SPH120，里面包含补丁说明书和补丁安装指导书，该补丁支持哪些型号，支持哪些版本可以安装当前补丁，请参考补丁说明书和补丁安装指导书。
如何做一个出色的班组长.ppt
08-06
如何做一个出色的班组长.ppt
后端开发笔记总结与书籍资源分享。主要包括编程语言C++、Go、Python等，
最新发布
08-06
优质项目，资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目。 本人系统开发经验充足，有任何使用问题欢迎随时与我联系，我会及时为你解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（若有），项目具体内容可查看下方的资源详情。 【附带帮助】： 若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步。 【本人专注嵌入式领域】： 有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为你提供帮助，CSDN博客端可私信，为你解惑，欢迎交流。 【适合场景】： 相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可以基于此项目进行扩展来开发出更多功能 【无积分此资源可联系获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担。 2. 部分字体以及插图等来自网络，若是侵权请联系删除。积分/付费仅作为资源整理辛苦费用。
vue iframe自适应高度跨域问题
06-12
Vue中使用iframe实现内容嵌套时，有时会遇到跨域和自适应高度的问题。这是因为浏览器出于安全原因，不允许从一个源（域名）加载另一个源的内容，除非服务器提供了适当的CORS（跨源资源共享）策略。对于跨域问题，你需要在服务器端设置允许跨域请求，或者在前端使用JSONP或者代理服务器来间接访问。 至于iframe的高度自适应，Vue本身并不能直接处理iframe的高度变化，因为它是在DOM渲染后处理数据的。但你可以通过以下方法解决： 1. 利用JavaScript事件监听：给iframe添加`load`或`message`事件，在事件触发时获取iframe的实际高度并更新其CSS样式。 ```javascript new Vue({ el: '#myIframe', methods: { updateIframeHeight() { this.$refs.myIframe.addEventListener('load', () => { this.$refs.myIframe.style.height = `${this.myIframeContentHeight}px`; }); } }, mounted() { this.updateIframeHeight(); } }) ``` 2. 使用Intersection Observer API：这是一个现代浏览器提供的API，可以检测元素是否进入或离开视口，适用于动态内容。你可以创建一个观察者，当iframe进入视口时计算其高度。 ```javascript const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.myIframeContentHeight = entry.target.contentDocument.body.scrollHeight; } }); }); observer.observe(this.$refs.myIframe); ``` 3. 使用第三方库如`vue-observe-visibility-events`：这个库可以帮助你在元素可见时执行回调，可以配合上述方法使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值