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不是流氓么.于是便有了以下的故事... 如何实现 ...
随机推荐
- Qt单元测试(QTestLib)
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt单元测试(QTestLib) 本文地址:http://techieliang.co ...
- Python使用ElementTree美化XML格式
Python中使用ElementTree可以很方便的处理XML,但是产生的XML文件内容会合并在一行,难以看清楚. 如下格式: <root><aa>aatext<cc&g ...
- CSS设计指南之CSS三种机制:继承、层叠和特指
一.继承 CSS中的祖先元素也会向后代传递一样东西:CSS属性的值.body元素是所有元素的祖先,所有标签都是它的后代,比如为body元素设置一种字体,那么文档中的所有元素,无论它在层次结构中多么靠下 ...
- MATLAN中矩阵表示中有一维是~表示的意思
[~,m]表示的意思解释. [~,m]=rat(12/34) m = 17 >> [x,m]=rat(12/34) x = 6 m = 17
- [bzoj4398] 福慧双修 最短路 二进制分组
---题面--- 题解: 考场上看的这道题,,,当时70分算法打挂了,今天才知道这个也是原题.... 首先,对于不跟1相邻的边,肯定不会经过两次,因为经过两次就回来了,除了增加路径长度之外没有任何意义 ...
- Android中WebView的跨域漏洞分析和应用被克隆问题情景还原(免Root获取应用沙盒数据)
一.前言 去年年底支付宝的被克隆漏洞被爆出,无独有偶就是腾讯干的,其实真正了解这个事件之后会发现,感觉是针对支付宝.因为这个漏洞找出肯定花费了很大劲,主要是因为支付宝的特殊业务需要开启了WebView ...
- 【BZOJ3240】【NOI2013】矩阵游戏(数论)
[BZOJ3240][NOI2013]矩阵游戏(数论) 题面 BZOJ 题解 搞什么矩阵十进制快速幂加卡常? 直接数学推导不好吗? 首先观察如何从每一行的第一个推到最后一个 \(f[i]=a·f[i- ...
- BZOJ3456:城市规划——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=3456 求出n个点的简单(无重边无自环)无向连通图数目 模数很熟悉,先敲一个NTT. 然后通过推导式 ...
- BZOJ1877:[SDOI2009]晨跑——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=1877 https://www.luogu.org/problemnew/show/P2153 Ela ...
- BZOJ2724:[Violet 6]蒲公英——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2724 输入格式 第一行两个整数n,m,表示有n株蒲公英,m次询问. 接下来一行 n 个空格分隔的整数 ...