页面iframe导致手机浏览器崩溃解决方案

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

iframe替代方案

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

jquery load(url) 方案

jquery 有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如下书写：

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

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

原因是外部引用的文件是写在 自调用匿名函数中

1、运用sea.js或者require.js进行js的依赖。
2、简单暴力方式，直接让函数暴露，去除匿名函数，给你一个名字，然后在js中调用这个函数！
这样就可以大体解决使用load(url)取代iframe产生的问题！

其他方案

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