前期因项目需要解决iframe跨域高度自适应问题,但在网上找了许久也没找到能用的,几乎都是转载的,也没经过测试,当时就不了了知了。最近该项目又要实现这种功能,没办法,硬着头皮也要上呀。通过查阅资料及加上自己的理解,总算实现了这个功能,在这暂存以备后查。
交待下项目背景。两个独立的项目A与B且为独立的域名就叫做 www.abc.com与www.efg.com吧。在A项目中要调用B项目的一个页面并且被嵌入的页面中有链接的,点击链接会跳转到新页面,所以页面高度就会变化,需要的效果就是iframe的高度根据页面的内容自动调整。
页面准备:共需要三个页面,A项目两个页面,一个是要嵌入B项目页面的框架页面,叫iframe页面吧,另个是中间代理页面,叫agent页面吧;B项目需要一个页面,那就是要被iframe页面嵌套的页面,就叫content页面吧。
实现方法:在content页面中加上一段JavaScript代码,主要功能就是获取当前页面的高度,然后在该页面中插入个隐藏的iframe去访问agent页面,并在链接地址后加上content页面高度,看代码吧:
$(function(){
var h = $(document.body).outerHeight(true);
$("body").append('<iframe style="display:none;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.abc.com/agent.html?t='+ new Date().getTime()+'#height=' + h + '" ></iframe>');
});
相关JavaScript代码用jQuery写的。用js代码生成的隐藏iframe访问A项目的agent页面,在后面有两个参数,t为当前时间,目的是为了避免浏览器缓存,#height增加锚点的方法是为了不刷新页面。我们再来看agent页面的代码:
var hash = window.location.hash.slice(1);
if (hash && /height=/.test(hash)) {
window.top.location.hash = "#" + hash;
}
通过对访问地址的处理可以得到#height的高度值,然后再将该值加在框架地址栏中,因为agent与iframe页面处于同域下所以没有跨域的问题。接下来我们要在iframe页面中对框架的高度进行处理:
var iframe = document.getElementById("iframe");//iframe的ID
var iframeHeight = function() {
var hash = window.location.hash.slice(1);
if (hash && /height=/.test(hash)) {
iframe.height = hash.replace("height=", "");
}
};
setInterval(iframeHeight, 500);
iframe页面主要的功能就是从地址栏中读取#height的值,然后调整iframe高度,因为被嵌入页面content的页面是会变化的,所以每500毫秒就会检测下。目前在项目中实现的效果还是可以的。
写了个小例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html
Demo源码下载:http://download.csdn.net/source/2982284
分享到:
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
框架完美解决了iframe之间的跨域通讯。底层技术采用window.name转换代理实现
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe 跨域访问session问题解决方法
页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.
iframe跨域问题:Uncaught DOMException Blocked a frame with origin解决方法
NULL 博文链接:https://hqlly.iteye.com/blog/1662337
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
高度自适应 跨域访问实例下载 高度自适应 跨域访问实例下载
以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...