这些代码要写在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. 敏捷冲刺Day2

    一. 每日会议 1. 照片 2. 昨日完成工作 网页设计与实现的完善 服务器的搭建前期--申请域名 激活域名 搭建服务器 分析接下来的任务与进度 总结前两天的工作 对产品的进一步展望 3. 今日完成工 ...

  2. [剑指Offer] 39.平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树. class Solution { public: int Get_Height(TreeNode* root) { if(root == NU ...

  3. [BinaryTree] 最大堆的类实现

    堆的定义: 最大树(最小树):每个结点的值都大于(小于)或等于其子结点(如果有的话)值的树.最大堆(最小堆):最大(最小)的完全二叉树. 最大堆的抽象数据结构: class MaxHeap { pri ...

  4. jsp当做第二个servlet request的生命周期 请求 响应 不管中间经历多少个servlet 只要最后一个serlvt执行后 则生命周期结束 request的域消失

    jsp当做第二个servlet  request的生命周期   请求 响应  不管中间经历多少个servlet 只要最后一个serlvt执行后 则生命周期结束  request的域消失

  5. BZOJ 1227 虔诚的墓主人(离散化+树状数组)

    题目中矩形的尺寸太大,导致墓地的数目太多,如果我们统计每一个墓地的虔诚度,超时是一定的. 而常青树的数目<=1e5.这启发我们从树的方向去思考. 考虑一行没有树的情况,显然这一行的墓地的虔诚度之 ...

  6. CodeChef LEMOVIE

    题意:给你n个数字(下标不同数值相同的数字应当被认为是不同的数字),有n!种排列方式.每种排列方式的价值定义为:第一次出现时比前面的所有数字都大的数值个数. 比如1,2,2,3这个排列中,1,2,3这 ...

  7. vijos1859[TJOI2014]电源插排

    题意:小 M 的实验室有很多电源插排.这些插排的编号从 1 到 N,由左向右排成一排.每天早晨,这些插排都是没有被使用的.每当一个学生来到实验室,他就将自己的笔记本电源插到某一个未被使用的插排上.实验 ...

  8. BZOJ3139/BZOJ1306 HNOI2013比赛/CQOI2009循环赛(搜索)

    搜索好难啊. 1.对于每个分数集合记忆化. 2.某人得分超过总分,剪枝. 3.某人之后全赢也无法达到总分,剪枝. 4.每有一场比赛分出胜负总分会多三分,而平局则会多两分.某人的分出胜负场次或平局场次超 ...

  9. [BZOJ2821]作诗

    description 在线询问区间内出现次数为正偶数的数的种数. data range \[n,m\le 10^5\] solution 分块大法好 首先离散化权值 这种对于权值做询问并且询问放在一 ...

  10. harbor1.4.0高可用部署

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...