我们刚刚上线的项目,用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里面的内容! .load( url , data , complete) 这样,我们改动就很小了,只要把之前的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) { 上面函数中的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,部分外部引入文件不调用! 原因是外部引用的文件是写在 自调用匿名函数中 1、运用sea.js或者require.js进行js的依赖。 其他方案 关于其他方案,有待完善和补充!也欢迎大家留意,补充自己的方案和想法! |