问题比较特殊，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. zabbix添加简单的监控

    本文讲述给zabbix添加zabbix自带模板和自定义添加模板:安装zabbix请参考本文 1.1. 给主机添加zabbix自带监控模板 第一步: 第二步: 如果添加模板,但是模板并没有监控项,下面的 ...

  2. Android N 通知概览及example

    概述 Android App的通知在维护你的App和用户之间的交互起着举足轻重的作用,为了提供更好的用户体验,Android N上的通知提供了可视化刷新,自定义视图和直接回复等功能.另外还提出了Mes ...

  3. C/C++ 开放库

    C/C++ 开放库 1.Best C/C++ Network Library 2.A list of open source C++ libraries

  4. PL/SQL编程基础(一)：PL/SQL语法简介（匿名PL/SQL块）

    PL/SQL PL/SQL是Oracle在关系数据库结构化查询语言SQL基础上扩展得到的一种过程化查询语言. SQL与编程语言之间的不同在于,SQL没有变量,SQL没有流程控制(分支,循环).而PL/ ...

  5. 向Docx4j生成的word文档添加图片和布局--第一部分

    原文标题:Adding images and layout to your Docx4j-generated word documents, part 1 原文链接:http://blog.iprof ...

  6. linux加载硬盘过程

    查看系统可用磁盘大小: [root@i-mbyar7df ~]# df -h Filesystem      Size  Used Avail Use% Mounted on /dev/sda1    ...

  7. dongle --NFC

    A dongle is a small piece of hardware that attaches to a computer, TV, or other electronic device in ...

  8. CSS伪代码

    /*在p之后插入我是好人*/ p.first:after { content: "好人" } /*在p之前插入亲爱的朋友men*/ p:before { content: &quo ...

  9. android 模仿今日头条ViewPager+TabLayout

    导入依赖库: compile 'com.android.support:design:25.3.1' 1.fg_content_demo2.xml <?xml version="1.0 ...

  10. PAT 1065 A+B and C[大数运算][溢出]

    1065 A+B and C (64bit)(20 分) Given three integers A, B and C in [−2​63​​,2​63​​], you are supposed t ...