1、跨域访问页面，
需要访问后台的页面，通过后台调转
2、跨域自适应宽高

 
思路：通过相互嵌套，获取跨域页面的高度，通过src传回到本域，通过parent方法设置主页的iframe的高度
  • index.jsp 本域
var ifr_el = document.getElementById("content");
function getIfrData(data){
//console.log("index:"+data);
if(oldHeight!=data){
oldHeight=data;
ifr_el.style.height = data+"px";
}
}
  • B.jsp 跨域
<%@include file="/static/iot/proxybase.html"%>
<iframe id="iframe_proxy" src="http://192.16.199.10:8060/Puriew/static/iot/middle.html#0" width="0" style="display: none;"></iframe>
<script>
var oldHeight_proxy = 0,
ifr_el = document.getElementById("iframe_proxy");
t_proxy && clearInterval(t_proxy);
var t_proxy = setInterval(function(){
var height_proxy = $("#body_1").height();//获取body的高度，跨域情况下document.body.scrollHeight;获取的是ifream设定之后的高度
//console.log("proxy: \t"+height_proxy+"\t oldHeight_proxy："+oldHeight_proxy);
if(oldHeight_proxy != height_proxy) {
oldHeight_proxy = height_proxy;
ifr_el.src += '#' +height_proxy;
}
},200);
</script>
  • middle.jsp 本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var oldHeight_middle = 0;
t_middle && clearInterval(t_middle);
var t_middle = setInterval(function(){
var height_middle = location.href.split('#')[location.href.split('#').length-1];
if(height_middle && height_middle != oldHeight_middle) {
console.log("middle:"+oldHeight_middle)
oldHeight_middle = height_middle;
if(window.parent.parent.parent.getIfrData) {
window.parent.parent.parent.getIfrData(oldHeight_middle);//传到index.jsp 本域
}
}
},200);
</script>
</body>
</html>
 
 
参考链接：
iframe之间通信问题及iframe自适应高度问题 http://www.cnblogs.com/tugenhua0707/p/3346522.html

iframe 完全跨域自适应高度的更多相关文章

  1. iframe跨域自适应高度

    思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...

  2. 引入的iframe是跨域的, 如何控制其高度

    前提是你有编辑这个跨域的iframe的权限!! 1. main-domain.html (main display HTML) <!DOCTYPE html> <html> & ...

  3. 【转】jquery iframe取得元素与自适应高度

    今天没事来总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery ...

  4. iframe显示跨域url页面

    可以通过JS搞定跨域问题,但是比较麻烦,我就在后台处理了,其实这样本质上也算不上是跨域了 后台otherwebsite.php: <?php $url="www.otherwebsit ...

  5. iframe操作(跨域解决等)

    note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象 iframe中取得主窗体 window.top (顶级窗口的window对象) window.parent ...

  6. IE下IFrame引用跨域站点页面时，Session失效问题解决

    问题场景:在一个应用(集团门户)的某个page中, 通过IFrame的方式嵌入另一个应用(集团实时监管系统)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中Session失效.(s ...

  7. iframe 跨域自适应 纯css解决方法

    <style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100% ...

  8. jquery iframe取得元素与自适应高度

    总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在 ...

  9. ionic2踩坑之文本域自适应高度(自定义指令，适用angular2)

    话不多说,看代码: import { Directive, ElementRef, HostListener,Input, Renderer, Component } from '@angular/c ...

随机推荐

  1. poj 1195 Mobile phones 解题报告

    题目链接:http://poj.org/problem?id=1195 题目意思:有一部 mobie phone 基站,它的面积被分成一个个小正方形(1 * 1 的大小),所有的小正方形的面积构成了一 ...

  2. Oracle：不同数据库版本导致的Ora-00918问题

    今天有同事反映,一个sql在10.0.2.4下面执行是好的,在11.0.2.3报Ora-00918问题. sql语句如下: SELECT kcdm, bjdm, f.kszc, f.jszc FROM ...

  3. lock的两种方式

    假设现在我们有100个数据项可以读写.有若干个线程,任何一个线程可能对任何一个数据项尽心读写. 但是,如果不同的线程在对同一个数据项进行读写,就可能发生错误.需要使用lock进行控制. 比如线程x要对 ...

  4. [Selenium] 使用Chrome Driver 的示例

    //导入Selenium 库和 ChromeDriver 库 pachage com.learningselenium.simplewebdriver; import java.util.concur ...

  5. 笔记本电脑处理器(CPU)性能排行榜

    笔记本电脑处理器(CPU)性能排行榜 本排行榜随新款处理器(CPU)的发布而随时更新.更新日期:2012年7月15日   排名 型号 二级+三级缓存 前端总线(MHz) 功率(瓦) 主频(MHz) 核 ...

  6. 使用git rebase合并多次commit

    使用git rebase合并多次commit 聊下 git rebase -i

  7. LXD安装

    #安装 #初始化(一路next) sudo lxd init #启动容器 lxc launch ubuntu:16.04 first #进到容器内 lxc exec first -- /bin/bas ...

  8. centos7添加新硬盘并挂载

    一.查看现有磁盘设备 fdisk -l 发现/dev/sdb 为新加的硬盘: 二.开始分区 fdisk /dev/sdb fdisk -l #再次查看分区情况,已经有了/dev/sdb1 三.创建文件 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 20. Model Binding

    模型绑定 这是个最简单的绑定 先从表单找.再从路由的值上找,最后去QueryString上找 通过反射获取这个类型的属性进行填充.反射完有几个属性,就开始去找着几个属性并绑定值 复杂类型 最后又加了一 ...

  10. C#（KeyChar和KeyCord值，KeyDown/KeyPress事件区别）

    1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加:2. 添加KeyPress / KeyDown事件: KeyPress 和KeyDown .KeyPr ...