获取iframe（angular 动态页面）高度

最新推荐文章于 2024-03-20 15:30:24 发布

冰墨白

最新推荐文章于 2024-03-20 15:30:24 发布

阅读量5.8k

点赞数

分类专栏： java 文章标签： angular html5 iframe

本文链接：https://blog.csdn.net/ag2163/article/details/47252279

版权

java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题比较特殊，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事件来监听发送跨文档消息传输内容。

<span style="font-size:14px;">module.directive('ngAppFrame', function () {
  return {
    restrict: 'EA',
    link: function (scope, element, attrs) {
      element.css("display", "block");
      scope.$watch(
        function () {
          return element[0].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, "*");
            }, 0);// timeout needed to wait for DOM to update
          }
        }
      );
    }
  }
});</span>

页面加入该directive

<span style="font-size:14px;"><div class="container-fluid " ui-view ng-app-frame></div></span>

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="0" marginwidth="0<span style="white-space:pre">	</span>" marginheight="0"></iframe>
    </div>
    <div class="axaFooterbg"></div>
  </body>

冰墨白

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取iframe（angular 动态页面）高度

问题比较特殊，google了好久才得到启示开发的angular页面，需要嵌入到客户的web中，以iframe方式。由于iframe的高度需要指定，而angular动态生成机制导致页面高度会随时变化，就会出现2个滚动条，一个是页面本身，一个是iframe里的。解决方法如下：1.写一个directive监听angular的$digest，实时获取body高度，通过 Html5 post
复制链接

扫一扫