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. YTU 2422: C语言习题 n个数逆序

    2422: C语言习题 n个数逆序 时间限制: 1 Sec  内存限制: 128 MB 提交: 150  解决: 96 题目描述 将n(n<20)个数按输入时顺序的逆序排列,用函数实现. 输入 ...

  2. let 命令 与 var的区别

    ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. <script> { let a = 10; var b = 1; } ...

  3. WAS：服务器停电后，重启DMGR，控制台访问不了

    1.   今天有现场WAS服务器停电,重启DMGR后,控制台网页打不开: 后来得知,防火墙可能有问题.(虽然之前该机器上防火墙是关着的,但掉电后,防火墙会重启规则) 关掉防火墙后,问题解决. 2.   ...

  4. MD5Util1

    package com.cc.hkjc.util; import java.math.BigInteger;import java.security.MessageDigest;import java ...

  5. Vim Vundle YouCompleteMe

    /************************************************************************************** * Vim Vundle ...

  6. LibSVM学习详细说明

    代码文件主要针对Matlab进行说明,但个人仍觉得讲解的支持向量机内容非常棒,可以做为理解这一统计方法的辅助资料; LibSVM是台湾林智仁(Chih-Jen Lin)教授2001年开发的一套支持向量 ...

  7. boost之timer

    1. timer类实现 #pragma once #include <ctime> #include <limits> class timer { public: timer( ...

  8. 【转】nose-parameterized是Python单元测试框架实现参数化的扩展

    原文地址: http://www.cnblogs.com/fnng/p/6580636.html 相对而言,Python下面单元测试框架要弱上少,尤其是Python自带的unittest测试框架,不支 ...

  9. vs2008打开类视图，看不到类的解决方法

    去工程文件中删除ncb文件,重新打开工程

  10. std::unique

    类属性算法unique的作用是从输入序列中“删除”所有相邻的重复元素. 该算法删除相邻的重复元素,然后重新排列输入范围内的元素,并且返回一个迭代器(容器的长度没变,只是元素顺序改变了),表示无重复的值 ...