页面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如下书写:

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

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

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

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

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

其他方案

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

时间: 2024-08-01 14:41:20

页面iframe导致手机浏览器崩溃解决方案的相关文章

迅雷加载项会导致IE9浏览器崩溃

相信很多网友今天启动电脑后的第一件时间就是下载IE9beta,看到IE浏览器的新界面以后感觉确实比之前的版本要简洁很多,色彩的搭配也更加舒服了.安装完毕以后立即打开浏览器体验,随便输入了一个网页打开即报错崩溃了.严重的打击了我对IE9的信心,还好找到了是迅雷图片浏览器插件导致的问题,并非浏览器本身的问题. 解决方法: 打开管理加载项,找到迅列的插件,把"迅雷网页图片浏览器IE支持"禁用就可以了,开始体验IE9吧 有兴趣的可以自己下载安装试试看,相信IE9会给你带来惊喜的. 友情提醒,I

网站导致浏览器崩溃的原因总结(多款浏览器) 推荐_javascript技巧

面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

导致google\firefox\360浏览器崩溃的测试视频

问题描述 基于缺陷的测试技术架构成果之一<导致Google浏览器崩溃的测试操作视频>(成都新测科技原创),欢迎交流和转发分享.后续还将陆续分享:可导致其他国际国内知名客户端软件崩溃的测试操作视频 http://www.tudou.com/programs/view/b9NLoWbN-cg/ 基于缺陷的测试技术架构成果之一<导致firefox浏览器崩溃的测试操作视频>(成都新测科技原创),欢迎交流和转发分享.后续还将陆续分享:可导致其他国际国内知名客户端软件崩溃的测试操作视频. ht

用户利益至上 百度手机浏览器率先修复安卓漏洞

硅谷网9月27日讯 近日,安卓平台曝出2类高危漏洞,该漏洞可导致手机浏览器存在泄露用户名.密码以及SD卡手机隐私信息的风险,给手机用户带来极大的安全隐患.对此,百度手机浏览器T5内核率先通过屏蔽本地恶意请求.过滤 Cookie非法访问.加密存储用户名密码等方式修复相关漏洞,给予用户更安全保护.同时,百度手机浏览器也提醒其他浏览器厂商对安卓平台此种漏洞予以重视. 据悉,此次爆发的安卓漏洞分别为本地恶意html漏洞和系统JS注入漏洞,在几乎所有手机浏览器中都存在.本地恶意html漏洞一旦遭黑客利用,

手机浏览器竞争激烈传统盈利模式或是最好选择

手机浏览器竞争激烈 传统盈利模式或是最好选择 特约撰稿 容海纳 最近,移动互联网行业暗潮涌动.无论是谷歌.百度和腾讯这样的互联网巨头,诺基亚.英特尔合苹果这样的手机和IT厂商,还是中国移动.中国电信这样的移动运营商,都将目光投向了移动互联网行业. 手机浏览器作为手机上网的入口,因此竞争也异常激烈.当前手机浏览器行业主要有两类企业,一类是靠手机浏览器"养家糊口"的企业,如Opera何UCweb,另一类是互联网巨头.在处于起步期的移动互联网行业,手机浏览器足以"糊口"吗

js缩放手机浏览器-如何用js恢复手机浏览器页面到初始的缩放比例

问题描述 如何用js恢复手机浏览器页面到初始的缩放比例 有一个手机上浏览的网页,我通过手势把页面放大了(没有写相关的手势控制代码,是手机浏览器自带的手势缩放功能),经过测试发现它实际是改变了浏览器的window.innerWidth/window.innerHeight这两个属性的数值,而window.outerWith/window.outerHeight都没有变化.那么问题来了,有没有方法 用js 把浏览器恢复到初始比例呢? 我已经尝试过下面的方法,都不行: 1.直接修改window.inn

在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决???

问题描述 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 在首页中iframe引入一个加载中的页面,在ie浏览器中该部分出现几秒钟白屏,怎么解决??? 解决方案 加载的那个页面初始化数据也是需要时间的,你可以在加载的时候有一个对应的提示[正在加载]或者加一个等待的gif图片.

如何解决手机浏览器页面点击不跳转浏览器双击放大网页_AngularJS

 手机端web网页项目 1,angluar js 1.4.6 网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转,点击完没有任何反应(本人使用angluar js route进行单页面应用跳转),此时地址栏的路径已经被更新为点击后的地址,并且双击页面网页会放大(顺着这个现象去找到了问题) 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta

如何使电脑IE浏览器崩溃后自动恢复之前打开的页面

  如何使电脑IE浏览器崩溃后自动恢复之前打开的页面           1.打开IE浏览器,从右上角打开Internet选项; 2.切换到"高级"选项卡; 3.在设置列表找到"浏览"--"启用自动崩溃恢复"选项,并勾选,然后点击确定,重启IE浏览器即可生效. 在电脑中按照上述方法进行设置后,如果再出现IE浏览器崩溃意外关闭的情况,重新打开浏览器后会提示是否恢复之前的网页,选择是即可打开.