原因

如下图，A域中有个B域的页面，但是B的页面的长度不确定，A无法去设置一个准确的高度。

PS:iframe高度设置auto是无效的

解决办法

如上图，

（1）在B页面中加一个A的代理页面的iframe

PS：这最里面的A页面能调用最外层A页面的方法，而B页面是调用不了最外层A的（因为跨域的安全限制）。

（2）当B页面加载完成时，修改A的agent.html所在iframe里src。

setTimeout(function(){

    var _height =  $("#vs-source").height();

    var b_iframe = document.getElementById("crossdomain_agent_iframe");  //agent.html的iframe的id 

    if( b_iframe ){

        var src = b_iframe.src.split("#")[0] ;

        src = src.split("?")[0] ;

        b_iframe.src =src+"?"+new Date().getTime()+"#"+(b_height+(_height-1000));

    }
},200) ;

（3）agent.html代码调用最外层A页面代码设置B页面高度

agent.html代码如下：

<!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">

<head><title>frame agent</title></head>

<body>

<script type="text/javascript">

function  pseth() {

   var win = parent.parent ;

    var hashHeight = window.location.hash;

    var tabId = win.$(".ui-tabs-selected:last").find("a").attr("tabid");

    var iframe = win.$("#"+tabId).find("iframe")[0] ;

    win._setIFrameHeight && win._setIFrameHeight(iframe,hashHeight.split("#")[1]) ;

}

pseth();

</script>

</body>

</html>

 弊端

1.B页面需要做修改，加一个iframe和主动设置一次。

PS:很多时候B页面是第三方的页面，这也是没办法的，需要弄的

设置跨域的iframe的高度的更多相关文章

  1. 跨域的iframe自动调整高度(cross-domain iframe resizer)

    可以使用iframe-resizer项目地址: http://davidjbradshaw.github.io/iframe-resizer/演示地址: http://davidjbradshaw.c ...

  2. 跨域引入iframe 自适应高度

    最近和别的公司合作一个项目,需要从他们那边引入一个页面,刚开始想的挺简单的,用iframe 引入就好啦,可是操作中才发现,自适应的问题不好解决,试了挺多办法,最终找到一个比较好的方法,记录一下,留着备 ...

  3. nodejs设置跨域访问

    //设置跨域访问app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", ...

  4. 如何实现跨域获取iframe子页面动态的url

    有的时候iframe的子页面会动态的切换页面,我们在父页面通过iframe1.contentWindow.window.location只能获取同源的子页面的信息.获取跨域的子页面信息会报错. 这时可 ...

  5. ASP.NET MVC中设置跨域

    ASP.NET MVC中设置跨域 1.什么是跨域请求 js禁止向不是当前域名的网站发起一次ajax请求,即使成功respone了数据,但是你的js仍然会报错.这是JS的同源策略限制,JS控制的并不是我 ...

  6. proxyTable设置跨域

    如何设置跨域 1.在config--index.js 中配置 proxyTable: { '/api': { target: 'http://www.xxx.com', //目标接口域名 change ...

  7. 谷歌浏览器和火狐浏览器设置跨域和https、http混用 Chrome

    谷歌浏览器和火狐浏览器设置跨域和https.http混用 Chrome    添加启动项: 右键点击Chrome快捷方式,在目标一栏后添加启动项 允许跨域: --disable-web-securit ...

  8. 阿里云OSS设置跨域访问

    OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问.当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权 ...

  9. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

随机推荐

  1. c#用socket异步传输字符串

    再次特别感谢张子阳老师的文章,是我深感益处. 在前一篇文章中可以看到,尽管消息分成了三条单独发送,但是服务端却将后两条合并成了一条.对于这些情况,我们可以这样处理:就好像HTTP协议一样,在实际的请求 ...

  2. [转载]TFS体系结构和概念

    TFS是Team Fundation Server的简称,是微软VSTS的一部分,它是Microsoft应用程序生命周期管理(ALM)工具的核心协作平台,简单的说它是管理和开发软件项目的整个生命周期的 ...

  3. IP，路由，交换基础培训记录

    IP 掩码  子网划分 vlan划分(有助于减少广播压力) vlan之间互通通过交换机打通. 路由,静态路由,动态路由(学习到的),路由表,下一跳,网络位长的优先级高. 交换机,hub集线器. hub ...

  4. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十二】

    <Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...

  5. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. Linux下通过源码编译安装程序

    本文简单的记录了下,在linux下如何通过源码安装程序,以及相关的知识.(大神勿喷^_^) 一.程序的组成部分 Linux下程序大都是由以下几部分组成: 二进制文件:也就是可以运行的程序文件 库文件: ...

  7. [SDK2.2]Windows Azure Cloud Service (35) 使用VS2013发布Azure Cloud Service

    <Windows Azure Platform 系列文章目录> 好久没有更新BLOG了,今天我们继续Windows Azure相关的内容. 笔者最近把Visual Studio升级到了20 ...

  8. 大数据下的Distinct Count（一）：序

    在数据库中,常常会有Distinct Count的操作,比如,查看每一选修课程的人数: select course, count(distinct sid) from stu_table group ...

  9. 学习ASP.NET Web API框架揭秘之“HTTP方法重写”

    最近在看老A的<ASP.NET Web API 框架揭秘>,这本书对于本人现阶段来说还是比较合适的(对于调用已经较为熟悉,用其开发过项目,但未深入理解过很多内容为何可以这样“调用”).看到 ...

  10. EntityFramework6.0的Sql读写分离拦截器 和 MVC的 Action拦截器 对比

    EF的DbCommandInterceptor类 拦截: EF6.1也出来不少日子了,6.1相比6.0有个很大的特点就是新增了System.Data.Entity.Infrastructure.Int ...