这些代码要写在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高度的更多相关文章

  1. 监听事件动态改变dom状态

    html代码: <table class="table table-striped"> <thead> <tr> <th>分类ID& ...

  2. MutationObserver 监听DOM树变化

    1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...

  3. MutationObserver 监听 DOM 树变化

    MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 Mut ...

  4. iOS:使用代理模式监听开关状态改变事件

    记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...

  5. oracle监听的动态注册和静态注册

    参考资料: https://blog.csdn.net/tianlesoftware/article/details/5543166 https://www.cnblogs.com/guilingya ...

  6. 动态替换iframe的src及动态改变iframe的高度

    实现效果:点击左侧右侧内容变化,但左侧保持不变(如折叠等) 动态替换iframe的src <iframe width="100%" frameBorder="0&q ...

  7. js动态改变iframe的高度

    js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%"  height="200"   ...

  8. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  9. H5如何解监听页面退出需求???

    事发背景(时间较久): 在一个阳光明媚的一天,这天lz正在工位上悠闲的敲着代码:说时迟那时快,运营小姐姐箭步过来,让lz做一个挽留弹窗:我当时一听这TM不是流氓么.于是便有了以下的故事... 如何实现 ...

随机推荐

  1. nuget程序包还原失败:未能解析此远程名称

    一个简便的方法就是取消下载缺少的程序包. 步骤如下: 1,工具--NuGet程序包管理器--程序包管理器设置 2,NuGet Package Manager--常规,取消勾选.

  2. C# lamda表达式

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. Spring AOP 源码解析

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  4. BZOJ 1791 岛屿(环套树+单调队列DP)

    题目实际上是求环套树森林中每个环套树的直径. 对于环套树的直径,可以先找到这个环套树上面的环.然后把环上的每一点都到达的外向树上的最远距离作为这个点的权值. 那么直径一定就是从环上的某个点开始,某个点 ...

  5. html的body内标签之超链接

    一,先来个简单的练练手,target="_blank" 的作用是在新的tab中打开页面.href 是超链接的意思. <!DOCTYPE html> <html l ...

  6. BZOJ5334:[TJOI2018]数学计算——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5334 小豆现在有一个数x,初始值为1. 小豆有Q次操作,操作有两种类型:  1 m: x = x ...

  7. BZOJ1297:[SCOI2009]迷路——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1297 windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 ...

  8. 51NOD 1149:Pi的递推式——题解

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1149 F(x) = 1 (0 <= x < 4) F(x) ...

  9. 【BZOJ 3569】DZY Loves Chinese II 随机化+线性基

    用到一个结论——[先建树,再给每个非树边一个权值,每个树边的权值为覆盖他的非树边的权值的异或和,然后如果给出的边存在一个非空子集异或和为0则不连通,否则连通](必须保证每条边的出现和消失只能由自己产生 ...

  10. Redis 的安装配置介绍

    redis 是一个高性能的key-value数据库. redis的出现,很大程度补偿了memcached这类keyvalue存储的不足,在部 分场合可以对关系数据库起到很好的补充作用.它提供了Pyth ...