获取iframe（angular 动态页面）高度
问题比较特殊，google了好久才得到启示
开发的angular页面，需要嵌入到客户的web页中，以iframe方式。由于iframe的高度需要指定，而angular动态生成机制导致页面高度会随时变化，
就会出现2个滚动条，一个是页面本身，一个是iframe里的。
解决方法如下：
1.写一个directive监听angular的$digest，实时获取body高度，通过 HTML5 postMessage方式传出
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 动态页面）高度的更多相关文章
- Python3.x：selenium获取iframe内嵌页面的源码
Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- 跨域下使用获取iframe的父页面URL
通常情况下,我们获取iframe父页面的url很简单:parent.location或top.location即可,但前提是它们遵循同源策略. 当iframe与父页面不属于同一个域名时,像上面的获取会 ...
- 主页面获取iframe 的子页面方法。
父页面parent.html <html> <head> <script type="text/javascript"> function sa ...
- 微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
在页面中调用wx.getSystemInfo即可获取当前页面的屏幕高度,如果写在app.js里面或者带有系统tab页面里面,获取的windowHeight会比不是tab的页面少48: 含有的TabBa ...
- iframe自适应当前页面高度
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} </style> & ...
- iframe脸面的页面和父页面之间的交互方法
1.iframe父页面修改iframe中的页面的信息 var obj = document.getElementById("iframeId").contentWindow; ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
随机推荐
- github团队协作教程
跟着笔者魔鬼般的步伐,我们一起来瞅瞅一个团队协作的任务如何进行版本管理吧~ 要跟上哦~ =============================================== 首先我们先来看下 ...
- Windows使用filezilla搭建FTP服务器
参考:https://segmentfault.com/a/1190000009033181 下载软件https://filezilla-project.org/ 安装过程不详述,默认安装即可 启动软 ...
- 百度输入法引起的Mac远程桌面Ctrl+.快捷键不起作用
被这个问题困扰已久!在Mac中通过远程桌面(Remote Desktop)连接至Windows服务器时,Ctrl+.快捷键不起作用,而这是用Visual Studio写代码时常用的快捷键(对应的命令是 ...
- Monte Carlo methods
Monte Carlo methods https://zh.wikipedia.org/wiki/蒙地卡羅方法 通常蒙地卡羅方法可以粗略地分成两类:一类是所求解的问题本身具有内在的随机性,借助计算机 ...
- Redis 缓存穿透，缓存击穿，缓存雪崩的解决方案分析
设计一个缓存系统,不得不要考虑的问题就是:缓存穿透.缓存击穿与失效时的雪崩效应. 一.什么样的数据适合缓存? 分析一个数据是否适合缓存,我们要从访问频率.读写比例.数据一致性等要求去分析. 二.什么 ...
- curl 模拟GET\POST请求,以及curl post上传文件
https://blog.csdn.net/fungleo/article/details/80703365
- How many ways??---hdu2157（矩阵快速幂）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2157 题意:有一个有向图,含有n个节点,m条边,Q个询问,每个询问有 s,t,p,求 s 到 t ...
- ASP.netMVC文件下载的几种方法
第一种:最简单的超链接方法,标签的href直接指向目标文件地址,这样容易暴露地址造成盗链,这里就不说了 第二种:后台下载 在后台下载中又可以细分为几种下载方式 首先,在前台,我们需要一个标签 &quo ...
- Android(十六 ) android 与蓝牙串口通讯
1.得到蓝牙适配器 BluetoothAdapter mBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); 2.打开蓝牙 if (!mBl ...
- thinkcmf安装教程与目录结构详解 快速上手版
最近接了一个建站项目,要求用thinkcmf来搭建,ytkah在想php都大致一样吧,快速地下载安装包,可是!怎么安装呢?没看到安装指引文件或目录,查看了安装说明public目录做为网站根目录,入口文 ...