摘要：进入报表页面的入口不是固定的页面，也不是固定的按钮，因此不同种类的报表传递的参数不同，并且各组参数之间没什么共同性。鉴于以上几点，我利用父子页面能够互相访问对方对象的特性，想了一个页面间隐式传递参数的方式。
该文写于 2012-08-10
在工作的开发过程中有个查看报表的需求——从某个页面点击按钮打开报表页面（该页面为新建窗口）。进入报表页面的入口不是固定的页面，也不是固定的按钮，因此不同种类的报表传递的参数不同，并且各组参数之间没什么共同性。原本的实现方式是通过 URL 的 queryString 将参数传递到报表页面，正如前面所说，不同种类的报表传递的参数不同，于是报表页面就会出现以下一些问题：
URL 过长，看起来很不美观；
需要对 queryString 进行解析与判断来判别是什么类型的报表；
如果未来多加一些类型的报表的话，判断也会随之增多，这样不仅代码量增加，维护起来也有点困难，还影响性能；
安全性欠佳，通过 queryString 找到规律的话，通过浏览器地址栏随便地输入一个符合规律的 URL 就能获得想要看的数据。
鉴于以上几点，我利用父子页面能够互相访问对方 window 对象的特性，想了一个“页面间隐式传递参数”的方式。
父页面（入口页面） JavaScript 代码javascriptwindow.windowPool = []; // 用于存储子页面的 window 对象及隐式传递的参数
var newWin = window.open( url ), // 新建窗口，url 为报表页面地址
reportParams = {}; // 报表所需参数
window.windowPool.push({
"window": newWin,
"parameter": reportParams
});
看到上段代码，也许会奇怪地问：“为什么要将子页面的 window 对象和报表参数分开，而不是将报表参数绑定在子页面的 window 对象上？”这是因为子页面如果刷新了的话，报表参数就会失效了。将子页面（报表页面）的 window 对象与报表参数组合成一个 JSON 添加到数组里是为了避免当从父页面（入口页面）打开多个显示不同种类报表的报表页面时，早先打开的报表页面刷新操作而引起的显示后打开的报表页面内容的问题。
子页面（报表页面） JavaScript 代码javascriptvar params, index = 0;
for( ; index < opener.windowPool.length; index++ ) {
if ( opener.windowPool[index].window === window ) {
params = opener.windowPool[index].parameter;
break;
}
}
该方式在除了 IE6 之外的浏览器都能正常运行，IE6 没测试过，不清楚兼容性如何。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91514.html
摘要：，表明执行操作的字符串。，这个属性可以指示系统如何启动一个，以及启动之后如何处理。是一个字符串，例如这里的的构造函数传入了两个参数，和组件名，调用了方法后，会在当前的应用中启动这个服务。 1. 前言 在Android中有四大组件，这些组件中有三个组件与Intent相关，可见Intent在Android整个生态中的地位高度。Intent是信息的载体，用它可以去请求组件做相应...
摘要：浏览器总是运行位于作用域链顶部的当前执行上下文。作用域的前端永远是当前执行代码所在环境的变量对象而全局执行环境的变量对象始终是作用域链中的最后一个对象。调用栈为了达到当前执行位置所调用的所有函数。 ECMAScript中的变量值类型 基本类型 : Number, String, Boolean, Undefined, Null 引用类型 : Object, Array, Func...
摘要：总结方法自执行时，指向，被对象调用时，指向对象。可以用和改变指向。 总结： 方法自执行时，this指向window，被对象调用时，this指向对象。可以用call(),apply()和bind()改变this指向。 默认绑定 全局环境中this默认绑定到window console.log(this); //window ...
摘要：调用栈就是为了到达当前执行位置所调用的所有函数。由于无法控制回调函数的执行方式，因此就没有办法控制调用位置得到期望的绑定，下一节我们会介绍如何通过固定来修复这个问题。 在《你不知道的this》中我们排除了对于this的错误理解，并且明白了每个函数的this是在调用时绑定的，完全取决于函数的调用位置。在本节中我们主要介绍一下几个主要内容： 什么是调用位置 绑定规则 this词法 调用...
阅读 1017·2023-04-26 00:47
阅读 3405·2021-11-16 11:53
阅读 588·2021-10-08 10:05
阅读 2508·2021-09-22 15:19
阅读 2803·2019-08-30 15:55
阅读 2629·2019-08-29 16:55
阅读 2748·2019-08-29 15:20
阅读 956·2019-08-23 16:13
