iframe嵌套过多，低性能手机浏览器崩溃解决方案

[confidence68]

问题

前面我们讲了 经典的iframe自适应高度重现江湖 ，页面中嵌套多个iframe让其高度自适应的方法。但是呢。我们iframe嵌套过多，会引发性能问题！关于iframe性能问题，网上也有不少文章，例如下面这篇文章 谨慎使用iframe标记。虽然文章里面的部分问题我们可以解决，但是iframe性能问题确实堪忧！

我们刚刚上线的项目，用iframe嵌套网页来实现手机端类似预览PDF的功能！上线之后，有部分客户反映，微信打开网页出现微信崩溃的问题。经过反复检查和修正，发现，嵌套过多的iframe确实可以引起浏览器崩溃。

iframe替代方案

虽然我们对iframe性能，代码，做了最大限度的改进和优化，但是嵌套过多的iframe还是会引起微信崩溃。因此，我们只能想最简单的替代方案！

jquery load(url) 方案

jquery 有load事件，这个应该我们都知道，也都用过，我之前也有文章讲过！和js onload事件类似。http://www.haorooms.com/post/js_jiazao_load

例如：

$(window).load(function() {}) 等价于window.onload = function(){ ... } 

我们今天说的是jquery的load()方法！！

jquery的load()方法和$.GET方法类似，但是load()方法，可以允许我们插入远程文档的一部分，例如如下：

$( "#result" ).load( "ajax/test.html #container" );

result这个id中仅仅载入ajax/test.html 文档id是container里面的内容！

jquery的load参数如下：

.load( url ， data ， complete)

complete是一个回调，可以是一个function。

这样，我们改动就很小了，只要把之前的iframe修改成div。把原来的urL动态的用load事件赋值给相应的id就可以了！

jquery load(url) 方案问题

jquery load(url) 方案问题虽然替换iframe简单，但是也有一些问题！

问题一：代码冗余

虽然jquery load(url) 可以过滤一些标签，但是我们每个页面中引用的很多css和js会引用多次。我们只能修改之前的模板，把部分外部引用的js和css合并，放在现有页面中进行加载。把每个页面中没有用的头部去掉，只剩下我们要用的div。

问题二：js文件不执行

针对这个问题，我们在每个load的url之后的回调函数中，重新加载执行页面中的js。 部分代码如下：

 $('.pdf_wrap div[id^="page"]').each(function (index, elem) {
         var _scr = '/Datareport/' + _this.pageConfig[index] + '/' + year + month + '/' + (index + 1);
              $(this).load( _scr,function(){
                 $('#'+(_this.pageConfig[index]+"sc") ).html()
               });
  })

上面函数中的pageConfig是如下声明的：

 pageConfig: ['page01', 'page02', 'page03', 'page0401', 'page0402', 'page05', 'page06', 'page07', 'page08', 'page09']

页面中的js如下书写：

<script type="text/javascript" id="page05sc">这里写页面中的js逻辑</script>

这样我们每个页面中的js就可以顺利执行了！

问题三：动态改变日期，刷新div的load的url，部分外部引入文件不调用！

原因是外部引用的文件是写在 自调用匿名函数中，关于什么是自调用匿名函数？看一下这篇文章http://www.haorooms.com/post/js_jquery_chajian 你就会明白了！因为自调用的匿名函数在页面初始化的时候执行一次，之后就不执行了，假如load（url）中用到了自调用匿名函数里面的内容，解决方法如下：

1、运用sea.js或者require.js进行js的依赖。

2、简单暴力方式，直接让函数暴露，去除匿名函数，给你一个名字，然后在js中调用这个函数！

这样就可以大体解决使用load(url)取代iframe产生的问题！

其他方案

关于其他方案，有待完善和补充！也欢迎大家留意，补充自己的方案和想法！