遭遇浏览器兼容性问题,这次是某些浏览器回退功能不正常

简介:

实现一个很简单的功能,两个动态页面A和B,从A页面导航至B页面,导航通过JS函数控制,具体写法就是window.location.href=xxx,然后点击浏览器上的回退箭头,可以从B页面回退到A页面。

各主流浏览器工作得非常好,IE6也很配合,好,很好,非常好。

但是,可是,可但是,在某些点击顺序变化的情况下,点击回退箭头,安全站点下的Safari总是强制弹出对话框。当然鉴于情况较为罕见,测试也没有计较,至少不能算不兼容。

到这里这个功能就算完成了?可能,也许,maybe…先上生产经受一下用户考验再说。

果然,在天朝总有些例外的情况会发生,别忘了我们有一堆中国特色的国产奇葩浏览器,而这次例外的是360安全浏览器和360极速浏览器。

用户反馈360浏览器回退偶尔有点问题,具体现象就是偶尔(我再次说了是偶尔)会发生点击360浏览器回退箭头直接有一个刷新前一页面(A页面)的动作,因为刷新导致A页面请求参数可能不合法而报错。

但是实际上我们所理解的回退功能是浏览器的独特的页面“记忆”功能,根本不需要页面再次刷新,所以我就顺理成章地想到要解决回退刷新页面的问题。

一开始怀疑是A页面的某个ajax异步调用造成的问题,后来抓包跟踪发现不是。

然后分析分析再分析排查排查再排查…

又过了很久终于想到可能和A页面的JS导航函数有关,就查了一下location.href,发现还有个document.location.href。然后我就学到window.location.href和document.location.href的主要区别:window.location.href对单一窗口单一文档(document)导航通常没有问题,但如果一个窗口中包含多个文档(比如页面当中嵌入iframe)在某些浏览器下就会导致奇怪的现象,例如导航失败,还有就是本文所写的浏览器回退功能不太正常。而通常情况下document.location.href和window.location.href功能一样,但在多文档窗口下它更适用一些。

看上面分析的区别,简直让我如梦方醒大彻大悟忍不住一阵激动。就尝试着把导航方法换成document.location.href,本地测试问题竟然没有重现,清理浏览器缓存重试果然确实没有重现。

再去排查A页面,果然有一个隐藏的曾经起过作用但是现在已被弃用的iframe,为了保险起见,又把A页面的iframe也去掉。

接着再发布再跑测试自己的电脑上果然正常了,非常好,很好,好。

此时我发自内心由衷钦佩自己的勤勉和严谨哈哈哈哈哈哈。

到这里你以为问题彻底解决了?图样图森破。

测试人员报告说问题依旧,清理浏览器缓存也不行,后来发布生产再验证果然问题依旧,而且测试主管顺带又提了个问题,iphone上chrome浏览器回退报一样的错误,好的,报个BUG先。

个人历史悠久的实践经验表明,分析解决浏览器兼容性这样的BUG简直就是开发人员的噩梦。除了技术方面,你还需要考虑外部环境如客户端设置、网络状况等等。针对本文所描述的浏览器回退功能的缺陷,至少我查了一堆资料就没有几个说法是可行的。有人提议重写浏览器的回退事件,我觉得也不合理,至少有点简单问题复杂化处理了,还是觉得document.loaction.href那个是至今查到的看上去理论上是最靠谱的,但是,你也许已经知道,“在理论上,理论和实践之间没有什么差别;在实践中,二者果然截然不同”。

在一番痛苦挣扎之后,想起我的直接领导以前对我说过的一句话,别一味埋头做事,有资源要学会充分利用,我就做了一个重大而明智的决定。听说我司UED好多强人,他们对浏览器的理解程度肯定比我这个野路子出身的高深的多,就发了个邮件转给他们请他们协助解决,前端就交给专业人士处理去吧。

 

附:动态调用webservice

开发过程中使用外部web服务的时候,通常我们可以通过工具如VS直接“添加web引用”,还有一种比较常用的方式是通过VS提供的命令行工具直接生成web服务代理类。

通过命令行工具的方式被很多开发人员采用,笔者也不例外。通常生成代理类的命令行格式如下:

wsdl /language:cs /out:MyService.cs /namespace:Myspace url或本地地址

但是实际开发的时候发现依赖的外部服务比较多,按照上面的方法你不得不按照各个web服务URL一个一个生成本地代理类,很明显,你会觉得这样做比较费事。好在我们知道了这个命令行的几个参数的含义,可以使用codedom技术动态下载编译生成代理类,然后通过反射调用服务方法。主要实现封装成如下示例代码:

DynamicInvokeWebService

通过上面的代码,我们可以分析得出,动态生成webservice的过程主要包括几步:

1、从目标URL下载WSDL数据

2、生成客户端代理类代码

3、并编译代理类

4、生成代理实例,并利用反射调用方法。

调用的形式如下:

            var affectNum = WebServiceUtil.DynamicInvokeWebService("webservice url", "OrderService", "SetFinishedByOrderId", 123456, true);
            if (affectNum != null)
            {
                Console.WriteLine((bool)affectNum);//设置订单状态是否完成
            }

 

可以想象,这样动态构造web服务并进行调用肯定会有一些性能损失,如果是后台应用系统,对性能要求不是特别高的情况下倒是不妨一试。

最后需要注意的一点,就是因为web服务是动态调用的,所以除了c#的基元类型如int、string、object等等,自定义类型是无法通过上述方法转换回来的,有心的你不妨动手一试。







本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/p/some-browsers-GoBack-key-donot-work-well.html,如需转载请自行联系原作者

目录
相关文章
|
5月前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
279 0
|
2月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。
|
4月前
|
数据可视化 安全 区块链
区块链钱包浏览器开发功能,价格和时间周期
开发区块链钱包浏览器涉及账户管理、交易查询、区块浏览、智能合约查询及数据可视化等功能。价格因开发难度、需求、团队专业度及第三方服务费用而异,通常在数万至数百万元。开发周期约数月到半年,包括需求分析、设计、开发、测试和上线等阶段。
区块链钱包浏览器开发功能,价格和时间周期
|
4月前
|
JavaScript
Vue - 超强实现网页禁止浏览器缩放功能
Vue - 超强实现网页禁止浏览器缩放功能
|
4月前
|
存储 算法 Java
栈:如何实现浏览器的前进和后退功能?
这篇文章讨论了计算机科学中的栈数据结构及其在浏览器前进、后退功能、函数调用、表达式求值和括号匹配等场景中的应用。栈是一种后进先出(LIFO)的数据结构,通常由数组或链表实现,具有入栈(添加元素)和出栈(移除最近添加的元素)的基本操作,时间复杂度为O(1)。文章通过实例解释了如何用栈来实现浏览器的前进和后退功能,以及在解析和求解数学表达式时如何利用栈来处理括号匹配。此外,还提到了栈在函数调用中的作用,即保存临时变量和管理调用顺序。文章以两个栈为例,详细描述了如何跟踪已浏览的网页历史记录,以便实现前进和后退功能。
|
5月前
|
开发工具 开发者
谷歌浏览器打开DWG图纸,实现圆转多边形功能(在线CAD开发教程)
本文介绍了如何使用在线CAD SDK实现圆转多边形功能。首先,需搭建绘图环境和添加命令行交互。接着,通过mxcad库,根据用户输入的边数实现两种转换方式:内接于圆(目标圆为多边形外接圆)和外切于圆(目标圆为多边形内切圆)。具体实现包括选中圆、获取边数、选择转换方式,然后根据用户选择绘制多边形。最终展示了转换效果。
谷歌浏览器打开DWG图纸,实现圆转多边形功能(在线CAD开发教程)
|
5月前
|
存储 算法 Java
数据结构与算法:栈:如何实现浏览器的前进和后退功能??
数据结构与算法:栈:如何实现浏览器的前进和后退功能??
45 0
|
5月前
|
Web App开发 存储 前端开发
Chrome 浏览器的隐身窗口(incognito window)功能解析
Chrome 浏览器的隐身窗口(incognito window)功能解析
|
11月前
|
移动开发
华为Mate60钉钉App内置浏览器中使用“@kangc/v-md-editor"组件,功能不正常
华为Mate60钉钉App内置浏览器中使用“@kangc/v-md-editor"组件,功能不正常
141 1
|
11月前
|
Web App开发 前端开发 JavaScript
JavaScript浏览器开发者工具和常用的IDE的调试功能
JavaScript浏览器开发者工具和常用的IDE的调试功能
下一篇
无影云桌面