问题比较特殊,google了好久才得到启示

开发的angular页面,需要嵌入到客户的web页中,以iframe方式。由于iframe的高度需要指定,而angular动态生成机制导致页面高度会随时变化,

就会出现2个滚动条,一个是页面本身,一个是iframe里的。

解决方法如下:

1.写一个directive监听angular的$digest,实时获取body高度,通过 HTML5 postMessage方式传出

在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3,  Opera 9, Chrome 3和 Safari 4都支持postMessage。该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。
module.directive('ngAppFrame', function () {
return {
restrict: 'EA',
link: function (scope, element, attrs) {
element.css("display", "block");
scope.$watch(
function () {
return element[].offsetHeight;
},
function (newHeight, oldHeight) {
if (newHeight != oldHeight) {
setTimeout(function () {
var height = attrs.minheight ? newHeight + parseInt(attrs.minheight) : newHeight;
var message = height;
window.parent.postMessage(message, "*");
}, );// timeout needed to wait for DOM to update
}
}
);
}
}
});

页面加入该directive

<div class="container-fluid " ui-view ng-app-frame></div>

2.iframe 父窗口监听message,获取iframe传出的动态高度并设定

<script>
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var iframe = document.getElementById("win");
iframe.height = event.data;
}
</script>
<body>
<div class="axaHeaderbg"></div>
<div class="axa_inner_b2c">
<iframe src="../../whatever" id="win" width="100%" height="100%" scrolling="no" frameborder="" marginwidth="" marginheight=""></iframe>
</div>
<div class="axaFooterbg"></div>
</body>

获取iframe(angular 动态页面)高度的更多相关文章

  1. Python3.x:selenium获取iframe内嵌页面的源码

    Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...

  2. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  3. 跨域下使用获取iframe的父页面URL

    通常情况下,我们获取iframe父页面的url很简单:parent.location或top.location即可,但前提是它们遵循同源策略. 当iframe与父页面不属于同一个域名时,像上面的获取会 ...

  4. 主页面获取iframe 的子页面方法。

    父页面parent.html <html> <head> <script type="text/javascript"> function sa ...

  5. 微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案

    在页面中调用wx.getSystemInfo即可获取当前页面的屏幕高度,如果写在app.js里面或者带有系统tab页面里面,获取的windowHeight会比不是tab的页面少48: 含有的TabBa ...

  6. iframe自适应当前页面高度

    <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} </style> & ...

  7. iframe脸面的页面和父页面之间的交互方法

    1.iframe父页面修改iframe中的页面的信息 var obj = document.getElementById("iframeId").contentWindow;   ...

  8. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  9. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

随机推荐

  1. CentOS 目录结构详解

     linux 目录结构 linux目录树 /: 根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中/bin:/usr/bin: ...

  2. SpringCloud--Ribbon负载均衡

    Ribbon实现客户端负载均衡 负载均衡:是对系统的高可用.网络压力的缓解和处理能力扩容的重要手段之一. 硬件负载均衡:主要通过在服务器节点之间安装专门用于负载均衡的设备: 软件负载均衡:通过在服务器 ...

  3. oracle Bug 4287115(ora-12083)

    今天公司开发在删除表时报错ora-12083,很是疑惑,数据字典记录的是表,而删除要用物化视图方式删除,如下: SQL> DROP TABLE CODE_M_AGENCY;DROP TABLE ...

  4. 【mlflow】打包:npm run build + python setup.py sdist

    mlflow是一个开源机器学习平台 最近需要使用一个它的最新版本,但是这个最新版本没有git包,无法通过pip install安装,需要打包安装. 打包完之后在项目的dist文件夹中有打包后的压缩包, ...

  5. Treasure Exploration---poj2594(传递闭包Floyd+最小路径覆盖)

    题目链接:http://poj.org/problem?id=2594 在外星上有n个点需要机器人去探险,有m条单向路径.问至少需要几个机器人才能遍历完所有的点,一个点可以被多个机器人经过(这就是和单 ...

  6. 比特币BTC全节点搭建

    比特币BTC全节点搭建 #环境 ubuntu 16.4 #硬盘500GB #截止2018-12-31磁盘占用超过230GB #客户端安装 #下载页面 #https://bitcoin.org/zh_C ...

  7. python __init__ 构造函数

    实例化过程 会执行__init__ 的函数方法 class SQLHelper: def __init__(self): # self = s1 print("helo") def ...

  8. 翻译:Bing地图瓦片体系

    Bing Maps Tile System Bing地图瓦片体系 原文链接:http://msdn.microsoft.com/en-us/library/bb259689.aspx Bing Map ...

  9. SVN Checkout 不包括源文件夹根目录

    SVN Checkout 不包括源文件夹根目录,比如我要checkout   trunk/ 下面的所有文件,但是不包括trunk 文件夹 我们可以在svn文件夹后面打个空格,在加个“.”就行了 eg: ...

  10. PAT 1102 Invert a Binary Tree[比较简单]

    1102 Invert a Binary Tree(25 分) The following is from Max Howell @twitter: Google: 90% of our engine ...