解决跨域iframe自适应高度

最新推荐文章于 2024-03-29 11:18:46 发布
最新推荐文章于 2024-03-29 11:18:46 发布
阅读量102 收藏
点赞数

关于iframe自适应高度的讨论可以先看看口碑UED的博客http://ued.koubei.com/?p=1217

大概原理见下图:

可以直接看示例：http://lzlu.com/lab/loader/

下面直接上代码了
下面是核心代码loader.js

/**

* 跨域iframe自适应高度解决方案

* Author: changyin@taobao.com <http://www.lzlu.com>

* Copyright (c) 2011, Taobao Inc. All rights reserved.

*/

var Loader = new function(){
var doc = document,body = doc.body,
self = this,


//获取url中的参数
getRequest = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
r = window.location.search.substr(1).match(reg);
return (r!=null)? unescape(r[2]) : null;
},


//获取配置，script的优先级大于url中的参数
getConfig = function(){
var scripts = doc.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
return function(param){
var p = script.getAttribute(param);
return p? p : getRequest(param);
};
}(),


//代理高度
proxyheight = 0,


//top页frame的id
frameid = getConfig("data-frameid"),


//监听实时更新高度间隔
timer = getConfig("data-timer"),


//获取代理的url
getProxyuUrl = getConfig("data-proxy"),


//创建代理的iframe
proxyframe = function(){
var el = doc.createElement("iframe");
el.style.display = "none";
el.name="proxy";
return el;
}();


//重置高度
this.resize = function(){
proxyheight = body.offsetHeight;
proxyframe.src = getProxyuUrl + "?data-frameid=" + frameid+ "&data-frameheight=" + (proxyheight+40);
}

this.init = function(){
var init = function(){
body.appendChild(proxyframe);
self.resize();

//是否update
if(!isNaN(timer)){
timer = timer<500?500:timer;
window.setInterval(function(){
if(body.offsetHeight != proxyheight){
self.resize();
}
},timer);
};
};
if(doc.addEventListener){
window.addEventListener("load",init,false);
}else{
window.attachEvent("onload",init);
}

//如果引入了JS框架,建议将上面一句改掉 例如：KISSY.ready(function(){init();});
}
};

Loader.init();

————————-
代理文件proxy.html

<!DOCTYPE html>
< html >
< head >
< title >proxy</ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" ></ head >
< body >
< script >
(function() {
var getRequest = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i"),
r = window.location.search.substr(1).match(reg);
return (r!=null)? unescape(r[2]) : null;
},
height = getRequest("data-frameheight");
try {
var el = window.top.document.getElementById(getRequest("data-frameid"));
if (!el) return;
el.style.height = height + 'px';
}
catch (e) {
//console.log(e);
}
})();
</ script >
</ body >
</ html >

?

————————-

使用方法：
一、在主页面要包含的iframe中引入loader.js

二、传入参数。有两种传参方法：

1.在主页面引用iframe的时候传参，将参数接在要引用的iframe的url后面
例如：<iframe id=”testframe” src=”a.html?data-frameid=testframe&data-auto=200&data-proxy=proxy.html”></iframe>

2.iframe页面包含loader.js的时候传入
例如：<script src=”loader.js” data-frameid = “testframe” data-timer = “2000″ data-proxy = “proxy.html” ></script>

如果闲麻烦直接按照示例 http://lzlu.com/lab/loader/写就行了，注意proxy.html一定要与最面的页面是同域的。


iteye_3607
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用location.hash实现跨域iframe自适应
12-10
www.baidu.com,假设地址：http://www.baidu.com/b.html 实现效果： A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小....
IFrame跨域高度自适应实现代码
09-05
针对跨域IFrame高度自适应的问题，通常有两种方法： 1. 使用`postMessage` API： `postMessage` 是HTML5引入的一种新的通信机制，允许来自不同源的脚本采用异步方式进行有限的通信。在IFrame中，父页面可以通过...
vue跨域iframe自适应高度
qq_39352780的博客
03-29 572
项目使用iframe引入百度页面，要做iframe自适应宽高。
跨域iframe的高度自适应
CHCH998的博客
09-22 244
1. 跨子域的iframe高度自适应 2. 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过iframe的contentDocument或document属性访问到文档
完美实现跨域Iframe高度自适应
sunsineq的专栏
11-28 567
<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=.
Iframe 跨域高度自适应
時雨的博客
07-10 434
一开始想直接在iframe加载完成后读取子页面的doc中body的高度，结果发现有跨域问题，无法获得子页面的具体信息，后面在网上寻找各种解决方案，有很多是没有用的，甚至直接没考虑跨域的，最后找到一种方便而且使用的方法：子页面发送消息给父页面，父页面监听消息。父页面存在一个iframe标签加载https://moments.shiyu.dev/friends 这个子页面，而且父子页面不在同一个域上，所以父页面在加载完成iframe后创建事件监听，监听子页面发来的消息(高度)。
iframe 跨域高度自适应
Lucky050866的博客
03-28 996
这个iframe的问题，在工作中简直就是突然的一到坎，打的戳不及防。通常很久遇到一次，每次遇到就忘记了上一次是如何解决的，emmmm…今天本仙女去总结一下。 在实际应用中，很多时候通iframe引入页面，如果同域情况，可以使用以下代码。 script: window.function(){ var ifm= document.getElementById(“iframepage”); var su...
跨域引入iframe高度自适应
weixin_44215595的博客
10-23 286
今天在对接的时候，iframe引入第三方的页面的时候，本想获取页面高度再去设置ifrmae的高度。但是因为网站和iframe子页面的域名不一样，所以出现了跨域问题。不过好在第三方是合作关系，让他们配合调整了一下页面，我们这里也改了一下，很容易也就解决了。 问题： 引入iframe页面的时候，母页面与子页面的域名不一样，出现跨域 解决前提： 能有权限修改两边的页面。 解决方法： 使用 HTML5 p...
跨域iframe高度自适应的多种方法
aaronpan21的专栏
04-25 8854
当 A页面中嵌入一个新页面B时，我们常常会使用 iframe来实现。当 A页面和 B页面在不同的域名下时，A页面就不能使用 Javascript 访问到的 B页面的高度，那么该如何解决这类问题呢？直接看例子吧。以下是跨域时 iframe 自适应高度的一些 demo：说明： - 以下 A 、B 和 C 分别代表 a.html 、b.html 和 c.html； - 以下例子均为 A 嵌入 B。
iframe高度自适应的解决方案
baidu_41604826的博客
05-26 3270
iframe高度自适应的解决方案 使用场景：通过Iframe来解决项目嵌套问题时会碰到iframe的高度自适应的问题； 正常情况下的iframe：会出现一个滚动条影响美观 情况1：不存在跨域情况时的解决方案 <iframe name="outerPage" onload="iframeload()" src="./test.html" name="myFrame" scrolling="auto" frameborder="0" id="outerPage" :style="{ 'min-
完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】
热门推荐
nebear的博客
07-21 1万+
Iframe的强大功能偶就不多说了，它不但被开发人员经常运用，而且黑客们也常常使用它，总之用过的人知道它的强大之处，但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应，这一点让很多人都头疼万分。百度或是谷歌一下，确实很多解决方法，但尝试一下，会发现问题很多：浏览器兼容性差，不能自适应，仅支持同域Iframe等诸多问题，尤其是跨域Iframe高度自适应问题。网上根本找不到一种可行
完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
js跨域问题之跨域iframe自适应大小实现代码
10-29
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
小程序-光影娱乐带后台（源码）.zip
最新发布
07-26
小程序-光影娱乐带后台（源码）.zip
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的高度，实现跨域高度自适应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值