原因

如下图，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. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  2. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  3. SQL Server 索引的创建原则

    避免对经常更新的表进行过多的索引,并且索引中的列尽可能少.而对经常用于查询的字段(外键)应该创建索引,但要避免添加不必要的字段. 数据量小的表最好不要使用索引,由于数据较少,查询花费的时间可能比遍历索 ...

  4. 矢量化的HTML5拓扑图形组件设计

    HT一直被客户称道的就是其全矢量化的设计特色,矢量相比传统图片好处太多了: www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html ...

  5. [Core] .NET Core & VS Code 之路(1) Hello World

    目录 相关链接 dotnet命令 VS Code Hello World Web Hello World 总结 其实本篇上个月已经写好, 只是 但是,不忘初心方得始终 相关链接 Learn .NET ...

  6. Redis 集群方案

    根据一些测试整理出来的一份方案(转自http://www.cnblogs.com/lulu/): 1. Redis 性能 对于redis 的一些简单测试,仅供参考: 测试环境:Redhat6.2 , ...

  7. C语言学习012:将代码文件分成多个文件

    如果将所有的代码都写到一个文件中,当对于小项目来说不会有什么问题,但是当它一个很大的工程的时候,如果将所有代码都写到一个文件中,不但开发起来很困难,维护更是头疼,所以我们应该将代码按不同的功能分别建立 ...

  8. 动态dynamically变更母版_Layout页body标签css的class

    这个功能演示是Insus.NET最近想实现的一个功能,就是动态dynamically变更母版_Layout页body标签的样式css的class. 很多视图共同一个母版_Layout页,但是某一个视图 ...

  9. 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度

    在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预期效 ...

  10. C#执行存储过程的简化

    下面的方法是我在实际开发中摸索出来的,可以在很大程度上简化调用存储过程的代码. 首先来看一下C#调用存储过程的一般过程:1.打开数据库连接SqlConnection:2.生成一个SqlCommand: ...