关于 window.open()
的参数传递及获取,综合权威信息整理如下:
一、参数传递方式
-
URL参数
通过URL查询字符串传递参数,例如:
window.open('http://example.com?id=123', '_blank');
在新窗口中可通过
location.search
获取参数:var id = parseInt(location.search.substring(1));
-
对象参数传递
可将对象序列化为JSON字符串传递:
var item = { name: 'John', age: 25 }; window.open('/commonView?data=' + encodeURIComponent(JSON.stringify(item)), '_blank');
在新窗口中解析参数:
var encodedObject = decodeURIComponent(location.search.split('?')); var decodedObject = JSON.parse(encodedObject);
-
POST数据传递
使用
POST
方法打开新窗口并传递数据:window.open('example.com', '_blank', 'method=POST&name=John&age=25');
注意:部分浏览器需服务器端配合处理。
二、参数获取方法
-
通过URL查询字符串获取
使用
URLSearchParams
解析:var params = new URLSearchParams(window.location.search); var id = params.get('id'); var name = params.get('name');
-
通过
window.opener
访问父窗口变量父窗口需先定义变量:
// 父窗口 var parentVar = 'Hello'; window.open('/childPage', '_blank').then((newWindow) => { newWindow.parentVar = parentVar; });
子窗口中访问:
var parentVar = window.opener.parentVar;
三、注意事项
-
参数编码
-
对于特殊字符需使用
encodeURIComponent
(如对象序列化后); -
从查询字符串获取参数后需使用
decodeURIComponent
解码。
-
-
浏览器限制
-
iOS系统对
window.open
有严格限制,可能被拦截,需使用window.open('blank', '_blank', 'allow-popups=true')
等特殊配置; -
老版本浏览器可能不支持某些窗口特性(如
windowFeatures
),需检测兼容性。
-
-
安全性
-
避免通过
window.open
打开不可信页面,防止跨站脚本攻击(XSS); -
使用
POST
传递敏感数据时需注意数据验证和隐私保护。
-
四、补充说明
-
窗口特性(features) :通过逗号分隔的字符串设置窗口属性(如
width=400,height=300
); -
兼容性 :
window.open
在现代浏览器中支持良好,但需注意浏览器弹窗拦截机制。
通过以上方法,可灵活实现窗口参数的传递与获取,满足不同场景需求。