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. 阶乘问题（大数阶乘）简单 n! (一个大数与一个小数相乘的算法 、一个大数与一个小数的除法算法 *【模板】 )

    sdut oj 简单n! Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 给定一个数n(0 <= n <= 150), ...

  2. Redis使用基本套路

    Redis的数据,通常都是来自于数据库. 存入Redis当中,可以快速的查询.不用每次都关联查询,然后其他处理什么的. 通常可以把一些,不经常变的数据存储其中. 避免数据变动,而Redis缓存数据不变 ...

  3. 一步一步学Silverlight 2系列（25）：综合实例之Live Search

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. nginx最简单的网站配置：单主机+静态文件

    1.域名绑定主机:新建一个A记录,将www的子域名绑定到主机的ip上:2.主机的nginx设置监听端口,绑定域名,修改网站根目录路径和默认首选文件:/etc/nginx/conf.d 这个目录中新建一 ...

  5. 【扬中集训DAY1T1】 微信群

    [题目链接] 点击打开链接 [算法] 对问题稍加分析后,发现其实要求的就是 : C(N,K) + C(N,K+1) + C(N,K+2) + ... + C(N,N) 因为N最大10^9,K最大10^ ...

  6. 【转】构建Maven项目自动下载jar包

    原文地址:https://blog.csdn.net/gfd54gd5f46/article/details/54973954 使用Maven 自动下载jar包 右键单击项目,将项目 转换成Maven ...

  7. 浅谈getAttribute兼容性

    最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用.于是百度了一些解决办法. IE的setAttr ...

  8. BZOJ[4127] Abs

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=4127 不算难的样子,才见过此类模型. 首先可以发现每次修改只增不减,那么这$O(n)$的负数最 ...

  9. 从ao神处偷取的头文件

    #include<bits/stdc++.h> using namespace std; #define ll long long #define ull unsigned long lo ...

  10. BestCoder Round #73 (div.2)1002/hdoj5631

    题意: 给出一张 nnn 个点 n+1n+1n+1 条边的无向图,你可以选择一些边(至少一条)删除. 分析: 一张n个点图,至少n-1条边才能保证联通 所以可以知道每次可以删去1条边或者两条边 一开始 ...