思路:

现有主界面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跨域自适应高度的更多相关文章

  1. iframe 完全跨域自适应高度

    1.跨域访问页面, 需要访问后台的页面,通过后台调转 2.跨域自适应宽高   思路:通过相互嵌套,获取跨域页面的高度,通过src传回到本域,通过parent方法设置主页的iframe的高度 index ...

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

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

  3. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  4. IFrame跨域访问自定义高度

    由于JS禁止跨域访问,如何实现不同域的子页面将高度返回给父页面本身,是解决自定义高度的难点. JS跨域访问问题描述:应用A访问应用B的资源,由于A,B应用分别部署在不同应用服务器(tomcat)上,属 ...

  5. IFrame跨域访问&&IFrame跨域访问自定义高度

    1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...

  6. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

  7. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  8. javascript跨域、iframe跨域访问

    1.window 对象 浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象.但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览 ...

  9. iframe跨域cookie问题

    今天在项目里面遇到了iframe跨域不能写cookie的问题.应用场景是这样的:有A和B两个业务,A要通过iframe的方式嵌入B,但是在ie下A不能通过写cookie的方式记录信息,在firefox ...

随机推荐

  1. 转载sublime text3中package Control

    Sublime Text 3 安装Package Control 原来Subl3安装Package Control很麻烦,现在简单的方法来了 一.简单的安装方法 使用Ctrl+`快捷键或者通过View ...

  2. libevent中定时器的使用方法

    #include <stdio.h> #include <stdlib.h> #include <sys/time.h> #include <signal.h ...

  3. ASP.NET MVC 修改视图的默认路径(MVC2,MVC3)

    ASP.NET MVC2 修改视图的默认路径 步骤:1.编写继承自WebFormViewEngine的类,重写视图路径 2.在Application_Start()中添加语句: ViewEngines ...

  4. cJSON 使用笔记

    缘      起 最近在stm32f103上做一个智能家居的项目,其中选择的实时操作系统是 rt_thread OS v1.2.2稳定版本,其中涉及到C和java(android)端数据的交换问题,经 ...

  5. TMS3705A PCF7991AT 线路图

  6. STM32的TAMPER-RTC管脚作为Tamper使用 - 防拆机

    当 TAMPER引脚上的信号从 0变成1或者从 1变成 0(取决于备份控制寄存器BKP_CR的 TPAL位),会产生一个侵入检测事件.侵入检测事件将所有数据备份寄存器内容清除.  然而为了避免丢失侵入 ...

  7. Codeforces Round #260 (Div. 1) D. Serega and Fun 分块

    D. Serega and Fun Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/pro ...

  8. [AngularJS] Directive Definition Objects (DDO)

    This function that we just set up is what's called a link function, and it's actually a very small p ...

  9. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

  10. You don't have permission to access / on this server

    配置虚拟主机的时候,里面加上如下: <Directory "/var/www/html"> Options Indexes FollowSymLinks AllowOv ...