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. 【Maven】pom.xml（1）

    在pom.xml加入: <build> <finalName>oauth2</finalName> <resources> <resource&g ...

  2. COGS-2049 疯狂动物城

    Description 你意外来到了一个未知的星球, 这里是一个动物乌托邦, 生活着一群拥有非凡智力的动物. 你遇到了一个叫做尼克的狐狸, 他准备给他的 GF 过生日 . 他将制作一个巨大的多层蛋糕, ...

  3. LINQ体验(7)——LINQ to SQL语句之Group By/Having和Exists/In/Any/All/Contains

    我们继续讲解LINQ to SQL语句,这篇我们来讨论Group By/Having操作符和Exists/In/Any/All/Contains操作符. Group By/Having操作符 适用场景 ...

  4. 如何使用BMap.Point传递变量、存储数据？

    在开发中使用到了百度地图进行开发,用于展示企业位置.由于数据量庞大,如果使用marker,将会造成界面卡顿,处理慢的问题. 在查看百度地图API示例是发现了海量点这个东西,还别说对于大数量的点加载起来 ...

  5. SPOJ：One piece（不错的带权括号最大匹配问题）

    One of DB and TN common interests is traveling. One day, they went to Grand Line and found One Piece ...

  6. HAOI2012高速公路——子区间计算

    题目:https://www.luogu.org/problemnew/show/P2221 似乎按点来算贡献很方便,但我抱住一篇没有这样的题解磕了两天... 以下转载: 题意:维护一段数列 支持区间 ...

  7. 【转】图像金字塔PyrDown,PyrUP

    原文链接:http://blog.csdn.net/davebobo/article/details/51885043 [图像金字塔] 图像金字塔这个词,我们经常在很多地方可以看到.它是图像多尺度表达 ...

  8. 任务38：JWT 设计解析及定制

    任务38:JWT 设计解析及定制 改造jwt token token的值不放在Authorize里面,而是放在header的token里面 asp.net core的源代码 在Security的下面 ...

  9. hibernate的基础学习--一对一关联

    一对一关系以丈夫和妻子模型 配置文件 妻子配置文件: <?xml version="1.0" encoding="utf-8" ?> <!DO ...

  10. 博客图片失效？使用npm工具一次下载/替换所有失效的外链图片

    前言 大约一个月前,微博的图片外链失效了,以及掘金因为盗链问题也于2019/06/06决定开启防盗链,造成的影响是:个人博客网站的引用了这些图片外链都不能显示. 目前微博和掘金的屏蔽,在CSDN和se ...