外系统单个功能页面嵌入填坑记

最近在做项目的涉及嵌入旧系统页面部分，前后一个多月时间，里面踩到各种坑，不写篇文章记录一下感觉都对不起这辛酸历程。

 

1.两个系统js操作跨域问题

一般来说企业应用系统登录成功之后的主要操作界面如下：

 可以看到整个操作界面实际上是由多个iframe组成的，我们的需求是嵌入【功能页面显示区域】的页面，但这些页面很多情况下会取父页面上的js变量值，这就需要新系统在嵌入页面时模拟出旧系统父页面上的js变量、函数等供子页面操作。很显然，这里涉及到两个系统的跨域访问问题，刚开始我们认为按照传统的解决方案将两个系统共用同一个根域名即可解决，所以就浮光掠影的点了点几个功能页面，看没问题就pass了。

 

结果等到后面正式做业务操作时发现许多页面里弹出了模态窗口，并且偷懒直接以当前窗口的window对象作为参数传值，使得在公共页面改写document.domain时出现通过window.dialogArguments获取不到值的问题。搜了一天资料，才发现了这个：

【按微软官方解释，需要1.原有的作为弹出页的页面顶部先自定义一个变量存储dialogArguments，2.不要使用window作为父页面showModelDialog时的入参，改为自定义的对象、数组、字符串等。才能解决这个问题

 

http://support.microsoft.com/kb/814458/zh-cn】

因为按照现有项目用到的框架，所有jsp页面都会引入一个公共jsp，所以原来设置根域名只需要在两个项目中改两个公共页面即可。但现在发现的这个问题真要按照这个方案解决得修改上千处代码，已经不能忍受了！

 

搜了三天资料也没想出前端可行的修改方案，为了一劳永逸的解决这个问题，最后决定在后端做文章，即加一个http代理，通过不同URL路径的前缀来区分是访问旧系统还是访问新系统，这样在前端永远是同一web应用，所以也就不存在恼人的各种跨域访问的问题了。

 

2.url中同名参数多次赋值问题

定下来通过后端http代理来访问新旧系统的策略之后舒服了半天，踩坑之路依旧。首先碰到的是就系统中某些框架页面的实现不够完善，很多页面访问url上存在同一参数赋值两次到url的情况，但一开始我们自己写的http代理的策略是后一次参数赋值会覆盖前一次的。这样就会有一些页面的展示结果跟旧系统里面打开的不一样，后来发现这些页面的java代码里面取参数用到的是request.getParameter，tomcat里面对该方法的说明是这样的：

【Returns the value of a request parameter as a String, or null if the parameter does not exist. Request parameters are extra information sent with the request. For HTTP servlets, parameters are contained in the query string or posted form data.

 

You should only use this method when you are sure the parameter has only one value. If the parameter might have more than one value, use getParameterValues(java.lang.String).

 

If you use this method with a multivalued parameter, the value returned is equal to the first value in the array returned by getParameterValues.

 

If the parameter data was sent in the request body, such as occurs with an HTTP POST request, then reading the body directly via getInputStream() or getReader() can interfere with the execution of this method.】

 

看上面蓝色粗体的那句，原来如果url中有同名参数多次赋值的情况下该方法会返回第一次所赋的值！！！

 

3.诡异的IE开发者工具调试

因为主要做嵌入页面，所以免不了经常用IE11的开发者工具，最常使用的就是【DOM资源管理器】和【网络】，这两块用下来还是很方便和值得信赖的。但在用【调试】的时候发现同一个路径的js文件不知道为什么在选择文件那地方竟然出现很多次：

真是让人醉了，开始以为既然都是同一路径下的文件所以随便选一个在代码执行路径下打断点即可调试，结果不行，最后索性给所有能打开的同一文件实例相同代码行都打了断点，终于可以调试了！！！到现在也没明白为什么IE里面会出现同一js文件的多个实例。

 

一次又一次填坑之后，世界终于美好了一点点。。。