H5特性 MutationObserver 监听元素 动态改变iframe高度
这些代码要写在iframe页中执行
<script type="text/javascript">
$(function () {
// Firefox和Chrome早期版本中带有前缀
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
// 选择目标节点
var target = document.body;
// 创建观察者对象
var observer = new MutationObserver(function (mutations) {
setIframeByElement(getIframeByElement(document.body))
});
// 配置观察选项:
var config = { attributes: true, subtree: true }
// 传入目标节点和观察选项
observer.observe(target, config);
// 随后,你还可以停止观察
//observer.disconnect(); });
function setIframeByElement(iFrame) {
$(iFrame).attr('height', $(iFrame).contents().find("body").height() + ' !important');
} function getIframeByElement(element) {
var iframe;
$("iframe", window.parent.document).each(function () {
if (element.ownerDocument === this.contentWindow.document) {
iframe = this;
}
return !iframe;
});
return iframe;
}
</script>
H5特性 MutationObserver 监听元素 动态改变iframe高度的更多相关文章
- 监听事件动态改变dom状态
html代码: <table class="table table-striped"> <thead> <tr> <th>分类ID& ...
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
- MutationObserver 监听 DOM 树变化
MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 Mut ...
- iOS:使用代理模式监听开关状态改变事件
记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...
- oracle监听的动态注册和静态注册
参考资料: https://blog.csdn.net/tianlesoftware/article/details/5543166 https://www.cnblogs.com/guilingya ...
- 动态替换iframe的src及动态改变iframe的高度
实现效果:点击左侧右侧内容变化,但左侧保持不变(如折叠等) 动态替换iframe的src <iframe width="100%" frameBorder="0&q ...
- js动态改变iframe的高度
js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%" height="200" ...
- 动态设置iframe高度
<%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...
- H5如何解监听页面退出需求???
事发背景(时间较久): 在一个阳光明媚的一天,这天lz正在工位上悠闲的敲着代码:说时迟那时快,运营小姐姐箭步过来,让lz做一个挽留弹窗:我当时一听这TM不是流氓么.于是便有了以下的故事... 如何实现 ...
随机推荐
- JavaScript中setInterval常见的问题(setInterval第一个参数加引号与不加引号区别)
- [剑指Offer] 39.平衡二叉树
题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. class Solution { public: int Get_Height(TreeNode* root) { if(root == NU ...
- Bootstrap 折叠(collapse) 初见
以下代码来自bootstrap中文网 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...
- WPF中DataGrid的应用-绑定,增改删,分页,样式
参考以下网址: http://www.cnblogs.com/fwbnet/archive/2012/05/08/2490974.html
- 在Ubuntu系统下编译arcsim仿真器
首先,用tar zxvf arcsim-0.2.1.tar.gz 将软件包解压 然后,打开里面的INSTALL文件,按照里面的步骤一步一步安装库.Ubuntu13.04下 1.BLAS sudo ap ...
- bzoj2437-兔兔与蛋蛋
题目 分析 第一次做这种题,其实很简单. 只能经过一次的博弈可以考虑转化为二分图博弈. 棋盘上有黑白色的棋子,可以把这个游戏看作空格在棋子间移动,于是就想到,把棋盘黑白染色,以空格为黑,那么空格的移动 ...
- Greenlet-手动切换
yield()是自己写的协程,Greenlet( )是已经封装好了的协程. 协程:遇到 I/O 操作就切换到别的地方了(先去处理其他携程去了).等原协程的 I/O 操作一完成就切回去.这样就把 I/O ...
- [CQOI2009]跳舞 网络流
题面:[CQOI2009]跳舞 题解: 首先最大时间不好求,而且数据范围很小,所以我们可以先二分一个最大时间,然后就只需要判断是否可行即可. 因此我们每二分一个mid,对于每个女生,连s ---> ...
- AOJ.综合训练.2016-12-8
提示:多个题目的代码采用了C ++的写法,对应编译器选择G ++,请不要直接复制代码. 下周实验考试,GOOD LUCK! 感谢汪神提供E题C语言代码 所有题目已更新为C语言写法 所有题目已更新为C语 ...
- 2017-7-19-每日博客-关于Linux下的CentOS中文件夹基本操作命令.doc
CentOS中文件夹基本操作命令 文件(夹)查看类命令 ls--显示指定目录下内容 说明:ls 显示结果以不同的颜色来区分文件类别.蓝色代表目录,灰色代表普通文件,绿色代表可执行文件,红色代表压缩文件 ...