相同location跳转代码在onclick与href中执行行为差异问询

问题成因说明 #

两种属性的浏览器解析流程存在差异：javascript:伪协议的href属性会比onclick事件属性多执行一次URL解码步骤，导致参数中的URL编码被提前解析，破坏了原有的参数结构。

第一种：onclick事件属性的解析执行流程 #

1. 浏览器解析HTML标签时，会先对onclick的属性值做一次HTML实体解码：
   • 代码中的&被解码为&
   • 其他URL编码（%3d、%26等）不属于HTML实体，保持不变
2. 解码后得到可执行的JS代码：

   location='/mySite/Test/TestLocationPage2.aspx?t=1&tpram=20209&Ref%3dhttps%3a%2f%2flocalhost%2fmySite%2fTest%2fTestLocationPage1.html%3ft%3d1%26tpram%3d20209'
   

3. 点击触发执行时，浏览器给location赋值才会对URL做URL解码，此时Ref%3d整体被解码为Ref=，后面的%26作为Ref参数值的一部分被解码为&，不会被识别为参数分隔符，最终得到的参数就是你观测到的第一种结果。

第二种：href属性javascript伪协议的解析执行流程 #

比onclick多了一步URL解码：

1. 第一步和onclick一致，先做HTML实体解码，&转为&，得到字符串：

   javascript: location='/mySite/Test/TestLocationPage2.aspx?t=1&tpram=20209&Ref%3dhttps%3a%2f%2flocalhost%2fmySite%2fTest%2fTestLocationPage1.html%3ft%3d1%26tpram%3d20209'
   

2. 因为是javascript:开头的伪协议URL，浏览器会先对整个href的内容做额外的一次URL解码，再交给JS引擎执行：
   • 此时%3d解码为=，%26解码为&，得到的JS代码变成：

   location='/mySite/Test/TestLocationPage2.aspx?t=1&tpram=20209&Ref=https://localhost/mySite/Test/TestLocationPage1.html?t=1&tpram=20209'
   

3. 执行这段JS给location赋值时，URL解析会把Ref值里的&识别为新的参数分隔符，所以Ref参数的值到?t=1就截止，后面多出来一个独立的tpram=20209参数，和你观测到的第二种结果完全一致。

内容的提问来源于stack exchange，提问作者jmoreno