完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

最新推荐文章于 2023-07-10 17:12:08 发布
最新推荐文章于 2023-07-10 17:12:08 发布
阅读量1.2w 收藏 6
点赞数 9
文章标签： html

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

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

<body>
<iframe src='http://hi.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">
必须 是<html>开头


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


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


 


好了，马上试试吧。100%不会让你失望。



nebear
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
iframe自适应宽高
11-08
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域认证。 提供了一系列的页面大小的计算方法来支持复杂的CSS布局。 检测修改DOM可以使网页大小使用MutationObserver。 发现可以导致页面大小调整事件（窗口大小调整，CSS动画和过渡，改变方向和鼠标事件）。 简化通讯和主机之间通过PostMessage iframe的网页。 在iframe页面链接修复和支持iFrame与父页面之间的链接。 提供自定义的大小和滚动方法。 使家长地位和视口大小的iframe。 与ViewerJS支持PDF和ODF文档。 后备支持到IE8。
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题
利用location.hash实现跨域iframe自适应
12-10
页面域关系： 主页面a.html所属域A：www.jb51.net 被iframe的页面b.html所属域B：www.baidu.com,假设地址：http://www.baidu.com/b.html 实现效果： A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.
IFrame跨域高度自适应实现代码
09-05
最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法
完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
关于layui的layer.open弹出层高度自适应的解决
yzw675628706的博客
03-31 1万+
在使用layui的layer插件打开弹出层的时候，会出现弹出层的Iframe高度设置为默认的150px，这样会导致出现滚动条或者内容显示不全的现象，在网上面也搜索了对应的解决方案。 **方案一：在弹窗的时候，设置area只规定宽度，不设置高度，让插件自适应，**如下： layui.layer.open({ type:2, //此处只规定宽度，不规定高度，让插件自适应高度 area:['300px'], content:'www.baidu.com', shade:0.5, title:'百度页面
iframe获取页面高度的方法含跨域（非同源策略）
qq_45353152的博客
04-12 4447
iframe自适应高度，意见postMessage,页面间的交互
iframe自适应高度
djt的专栏
06-05 2268
来自:http://ued.koubei.com/2008/05/07/iframe-auto-fit-height/这贴比较长，没有耐性的朋友请直接拖到帖子末尾的代码示例，或者直接去玩我提供的Demo。Demo页面：主页面 iframe_a.html ，被包含页面 iframe_b.htm 和 iframe_c.html下面开始讲：通过Google搜索iframe 自适应高度，结
postMessage 跨文档消息传递
github_38948311的博客
10-23 912
postMessage作用在于解决，来自不同域的页面之间的消息传递，而且稳妥又方便。假设此时有一个文档A，要向文档B传递消息C，就可在文档A中直接写：B.postMessage(C, B.domain);postMessage()方法接收两个参数，第一个为要传递的消息，第二个为消息接收方所处的域。第二个参数的作用在于保障通信安全。即防止把消息发送到不安全的地方。若要把消息发送到来自任何域的文档，可把
iframe 跨域 自动适应高度
11-01
iframe 跨域 自动适应高度；iframe 跨域 自动适应高度；
Django框架学习14--admin优化xadmin
铁马冰河入梦来
12-13 1422
xadmin是对Django自带框架admin的优化，可以使得后台界面布局合理，美观。 一.Xadmin引入Django工程中 1.xadmin下载地址https://github.com/sshwsfc/xadmin 2.进入后下载Django版本对应的分支，下载后解压，将里边的xadmin文件夹拷贝到Django项目下新建的extra_apps包下 3.extra_apps右键-找到M...
xadmin使用（一）基础配置
jeekmary的博客
11-24 1778
django自带的admin框架有些功能扩展的并不是很好，所以今天我们介绍xadmin这种好的第三方框架 环境 pyCharm python 3.6 django 2.0 创建一个新的项目 配置好数据库时区 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', '...
跨域和非跨域 获取iframe页面高度的方法
weixin_30376083的博客
09-20 323
跨域方法： 第一步，在主页面里插入代码：//假设主域名是www.aaa.com 需要插入的跨域域名为www.bbb.com <iframe src="http://www.bbb.com/index.html" width="100%" height="100%" id="iframepage" name="iframepage" onLoad="iFrameHeight()" f...
html iframe自动高度,真正解决iframe高度自适应问题
weixin_33826994的博客
06-02 3845
1.前言解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂如果使用iframe时，遇到以下的需求：iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度右侧不允许出现两个滚动条iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化(如：下拉菜单，左侧导航栏等)页面可能同...
iframe嵌入网页时，页面大小怎么自适应
热门推荐
五花漏的博客
02-24 2万+
问题描述： 页面中有一容器div，有宽高属性。在div中嵌入一个iframe页面，呈现这种效果： 可以看到嵌入的页面只露出了一部分。 而我们希望：嵌入的页面能够完全展示在容器中。 思路：利用CSS的 transform，进行页面缩放。 1、我开发用的电脑屏幕分辨率是 1920 x 1080，以此为基准，设置iframe的宽高。 2、iframe 的父元素 div 的宽高是屏幕宽高的50%，所以 transform: scale(0.5)这个数值是0.5。（其余的三个属性没啥可说的，不明白的搜一下W3C吧
Iframe 跨域高度自适应
時雨的博客
07-10 371
一开始想直接在iframe加载完成后读取子页面的doc中body的高度，结果发现有跨域问题，无法获得子页面的具体信息，后面在网上寻找各种解决方案，有很多是没有用的，甚至直接没考虑跨域的，最后找到一种方便而且使用的方法：子页面发送消息给父页面，父页面监听消息。父页面存在一个iframe标签加载https://moments.shiyu.dev/friends 这个子页面，而且父子页面不在同一个域上，所以父页面在加载完成iframe后创建事件监听，监听子页面发来的消息(高度)。
iframe自适应高度（随内容高度变化）
weixin_50641294的博客
05-25 5910
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应 1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe 代码实现 1.首先在嵌套页面获取父级ifram元素 let iframeDom = parent.parent.document.getElementById("iframe") 2.获取嵌套页面高度 let box = document.getElementById("box") 3.把页面高度复制给父级ifram iframe
iframe高度自适应的简单实现
web开发成长过程
03-11 612
假如页面a中有iframe标签，其src属性为页面b 。 页面b高度是变化的，需要先计算本页面高度，然后调用父页面函数更改其高度即可。 b 页面 中js函数： function getheight(){   var rheight = ($("#leftin").height()>520)?$("#leftin").height():520;   parent.setHe
iframe跨域高度自适应
最新发布
08-25
为了实现iframe的跨域高度自适应，你可以使用以下步骤： 1. 在父页面中，先获取到子页面的高度。可以通过子页面中的某个元素或者API来获取子页面的高度信息。 2. 使用window.postMessage方法将子页面的高度发送给父页面。在子页面中，需要监听message事件，并将子页面的高度发送给父页面。 在父页面中，添加以下代码： ```javascript // 监听来自子页面的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的子页面 if (e.origin !== '子页面的域名或URL') { return; } // 获取子页面传递过来的高度 var height = parseInt(e.data); // 设置iframe的高度 document.getElementById('yourIframeId').style.height = height + 'px'; }); ``` 在子页面中，添加以下代码： ```javascript // 获取子页面的高度 function getHeight() { var height = document.body.offsetHeight; // 将高度信息发送给父页面 window.parent.postMessage(height, '父页面的域名或URL'); } // 监听父页面传递过来的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的父页面 if (e.origin !== '父页面的域名或URL') { return; } // 获取父页面传递过来的高度 var height = parseInt(e.data); // 设置子页面的高度 document.body.style.height = height + 'px'; }); // 在页面加载完成后获取页面高度并发送给父页面 window.onload = function() { getHeight(); }; ``` 在上述代码中，你需要替换`子页面的域名或URL`和`父页面的域名或URL`为你实际使用的域名或URL。`yourIframeId`需要替换为你iframe元素的ID。 通过这种方式，子页面可以将自身的高度信息发送给父页面，父页面则可以根据接收到的高度信息来动态调整iframe的高度，实现跨域高度自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值