iframe跨域自适应高度
思路:
现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。
当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。
这样A就可以通过location.hash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url。
而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一些非常有意义的事情。)。
由于A和main页面同域,所以可以修改main的dom节点属性,从而达到我们设置iframe标签高度的目的。
iframe主页面:main.html
<iframe id="iframeB" name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
iframe嵌套页面:B.html
<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe> <script type="text/javascript"> function sethash(){ hashH = document.documentElement.scrollHeight; //获取自身高度 urlC = "www.a.com/A.html"; //设置iframeA的src document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递 } window.onload=sethash; </script>
中介页面:A.html
<script>
function pseth() {
var iObj = parent.parent.document.getElementById('iframeB');//A和main同域,所以可以访问节点
iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>
iframe跨域自适应高度的更多相关文章
- iframe 完全跨域自适应高度
1.跨域访问页面, 需要访问后台的页面,通过后台调转 2.跨域自适应宽高 思路:通过相互嵌套,获取跨域页面的高度,通过src传回到本域,通过parent方法设置主页的iframe的高度 index ...
- iframe 跨域自适应 纯css解决方法
<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100% ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- IFrame跨域访问自定义高度
由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- js iframe跨域访问
1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- javascript跨域、iframe跨域访问
1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...
- iframe跨域cookie问题
今天在项目里面遇到了iframe跨域不能写cookie的问题.应用场景是这样的:有A和B两个业务,A要通过iframe的方式嵌入B,但是在ie下A不能通过写cookie的方式记录信息,在firefox ...
随机推荐
- HDU 4035Maze(概率DP)
HDU 4035 Maze 体会到了状态转移,化简方程的重要性 题解转自http://blog.csdn.net/morgan_xww/article/details/6776947 /** dp ...
- magento目录结构精编版
1 /app – 程序根目录 2 3 /app/etc – 全局配置文件目录 4 5 /app/code – 所有模块安装其模型和控制器的目录 6 7 /app/code/core – 核心代码或经过 ...
- Java 线程池学习
Java里面线程池的顶级接口是Executor,但是严格意义上讲Executor并不是一个线程池,而只是一个执行线程的工具.真正的线程池接口是ExecutorService. 下面这张图完整描述了线程 ...
- 跟SAP系统集成的Android应用
首先吐槽一点,这是我的第一个Android应用,很糙. 这个应用适合于上了SAP系统的企业内部使用,并且限于制造型MTO模式,需要针对生产订单报工操作的场景,因为此应用主要的一个目的,就是用来方便报工 ...
- 二进制程序分析工具Pin在Windows系统中的安装和使用方法
这篇日志其实很弱智,也是因为换了新电脑,实验环境不全(当然,做这个实验我是在虚拟机里,因为接下来想拿些恶意代码的数据),所以这里记录一下在Windows下怎么安装和使用Pin这个程序分析领域最常用的工 ...
- 通俗理解C#委托和事件
引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...
- Receive Windows Messages In Your Custom Delphi Class - NonWindowed Control - AllocateHWnd
http://delphi.about.com/od/windowsshellapi/a/receive-windows-messages-in-custom-delphi-class-nonwind ...
- Simple Worker Thread Class
http://www.codeproject.com/Articles/36184/Simple-Worker-Thread-Class Introduction Many times we need ...
- ASP.NET Web Forms的改进
虽然ASP.NET Web Forms不是vNext计划的一部分,但它并没有被忽视.作为Visual Studio 2013 Update 2的一部分,它重新开始支持新工具.EF集成和Roslyn. ...
- git项目添加.gitigore文件
以前一直没有注意这个文件,最近读到了黄勇的<架构探险>,觉得这个文件还是很有用的. .gitigore文件可以自己配置. 我使用的是书中所用的配置,简洁明了. # Maven # targ ...