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

2717次浏览

问题

前面我们讲了 经典的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产生的问题!

其他方案

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

Tags: iframehtml

相关文章: