原因

如下图，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. Strophe.js连接XMPP服务器Openfire、Tigase实现Web私聊、群聊(MUC)

    XMPP(Extensible Messaging and Presence Protocol)是一种网络即时通讯协议,它基于XML,具有很强的扩展性,被广泛使用在即时通讯软件.网络游戏聊天.Web聊 ...

  2. php手册总结（一）

    一:自动加载 __autoload(): 注意: 1:spl_autoload_register() 提供了一种更加灵活的方式来实现类的自动加载.因此,不再建议使用 __autoload() 函数,在 ...

  3. pomelo获取客户端IP

    代码: Handler.prototype.getClientIp = function(msg, session, next) { var ip = session.__session__.__so ...

  4. Prim算法(二)之 C++详解

    本章是普里姆算法的C++实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http://www.cnblogs.com/sk ...

  5. Network - SNMP

    Simple Network Management ProtocolWikipediahttps://en.wikipedia.org/wiki/Simple_Network_Management_P ...

  6. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】

    <Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. 《HelloGitHub月刊》第03期

    <HelloGithub>第03期 兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个 ...

  8. plsql修改表报错：ORA-25150

    几次通过plsql修改表结构出现这个错误,为人不求甚解真是要不得.我甚至对老大大言不惭的说没有权限,即便是sql语句都不行.结果赤果果地打脸. 最终找到如下原因: 1.操作用户表空间的默认值问题: 这 ...

  9. UWP开发入门（二十三）——WebView

    本篇讨论在UWP开发中使用WebView控件时常见的问题,以及一些小技巧. WebView是实际开发中常用的控件,很多大家抱怨的套网页的应用都是通过WebView来实现的.这里要澄清一个问题,套网页的 ...

  10. 一、Stream,sink,source,transform

    1. 蓝牙核心概述 2.Stream,sink,source,transform 在ADK的blueCore里面,Stream作为一个逻辑结构用来描述一个数据终点(data Endpoint).通常, ...