原因

如下图，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. java中Comparable实现对象的比较

    /* class A implements Comaprable<A>{ } 那么 A x = new A(); 类关系图 Object o = A; Object Comparable ...

  2. Floyd算法(三)之 Java详解

    前面分别通过C和C++实现了弗洛伊德算法,本文介绍弗洛伊德算法的Java实现. 目录 1. 弗洛伊德算法介绍 2. 弗洛伊德算法图解 3. 弗洛伊德算法的代码说明 4. 弗洛伊德算法的源码 转载请注明 ...

  3. Quartz Java resuming a job excecutes it many times--转

    原文地址:http://stackoverflow.com/questions/1933676/quartz-java-resuming-a-job-excecutes-it-many-times Q ...

  4. 【GIT】Github上传本地代码详解

    本教程结合Github服务端和客户端完成本地代码上传至Github,下面进行详细讲解: 1.创建Github账号,这一个步骤应该不用太多解释,直接上官网进行注册登录即可https://github.c ...

  5. CentOS7 Java安装

    CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...

  6. Theano入门神经网络(二) 实现一个XOR门

    与非门的图片如下 示意图 详细解释: 1 定义变量的代码,包括了输入.权值.输出等.其中激活函数采用的是sigmod函数 # -*- coding: utf-8 -*- __author__ = 'A ...

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

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

  8. Hyperledger区块数据的访问

    简介 本文介绍了访问Hyperledger区块数据的几种方法. REST API Hyperledger提供了多个REST API (https://hyperledger-fabric.readth ...

  9. 实现ASP.NET无刷新下载并提示下载完成

    先上代码,后面再进行说明. 以下是前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehi ...

  10. MVC的控制器的激活过程，我们从MvcHandler开始讲，前面的事情以后再讲

    一.从MvcHandler开始(不要觉得是代码,让你看懂才是最重要的) using Microsoft.Web.Infrastructure.DynamicValidationHelper; usin ...