这些代码要写在iframe页中执行

  1. <script type="text/javascript">
  2. $(function () {
  3. // Firefox和Chrome早期版本中带有前缀
  4. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
  5. // 选择目标节点
  6. var target = document.body;
  7. // 创建观察者对象
  8. var observer = new MutationObserver(function (mutations) {
  9. setIframeByElement(getIframeByElement(document.body))
  10. });
  11. // 配置观察选项:
  12. var config = { attributes: true, subtree: true }
  13. // 传入目标节点和观察选项
  14. observer.observe(target, config);
  15. // 随后,你还可以停止观察
  16. //observer.disconnect();
  17.  
  18. });
  19. function setIframeByElement(iFrame) {
  20. $(iFrame).attr('height', $(iFrame).contents().find("body").height() + ' !important');
  21. }
  22.  
  23. function getIframeByElement(element) {
  24. var iframe;
  25. $("iframe", window.parent.document).each(function () {
  26. if (element.ownerDocument === this.contentWindow.document) {
  27. iframe = this;
  28. }
  29. return !iframe;
  30. });
  31. return iframe;
  32. }
  33. </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. .net 简体转换繁体实例,繁体转换简体 Encode.dll、下载

    在项目中先引用Encode.dll  下面是下载地址: Encode.dll ChineseConverter.dll 1.html页面代码 <%@ Page Language="C# ...

  2. PokeCats开发者日志(十一)

      现在是PokeCats游戏开发的第六十天的上午,易版权的状态变为了待收证,但愿不久就能送到了吧.

  3. hadoop下安装mysql

    http://www.cnblogs.com/zhuyp1015/p/3561470.html       第一步:先把这个文件放入到linux环境下桌面. 接着编写脚本:sudo apt-get u ...

  4. 【Linux】- ps -ef |grep 命令

    ps:将某个进程显示出来 grep:查找 |:管道命令 表示ps命令与grep同时执行 PS是LINUX下最常用的也是非常强大的进程查看命令 grep命令是查找,是一种强大的文本搜索工具,它能使用正则 ...

  5. WCF面试精典题汇总

    1.WCF接口中的参数改名问题 在写WCF Web Service接口的时候,如果你对接口的参数名做改动的时候,一定要记住Update所有应用该Web service的客户端的Referrence,否 ...

  6. 再看perf是如何通过dwarf处理栈帧的

    从结构体stack_dump入手, util/unwind-libunwind-local.c 中有函数access_mem #0 access_mem (as=0x1f65bd0, addr=140 ...

  7. Prepare方法和UnPrepare方法

    Query组件提供的Prepare方法的作用是通知BDE或数据库服务器优化并准备执行SQL操作.Query的Prepare方法能优化执行的原因在于该方法是是在SQL语句执行前就对其进行分析.检查和编译 ...

  8. 安装FastDFS+Nginx

    安装FastDFS FastDFS开发者的GitHub地址为:https://github.com/happyfish100 打开上述链接,我们点击fastdfs–>release,发现最新版的 ...

  9. Ip合并

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  10. BZOJ4755 JSOI2016扭动的回文串(二分答案+哈希)

    显然答案应该是由单串以某位置为中心的极长回文串继续在另一个串里拓展得到的.枚举中间位置二分答案,哈希判断即可.注意考虑清楚怎么处理偶回文,比如像manacher一样加分隔符. #include< ...