今天又遇到一个奇葩的 bug。

在 iframe 下跳转请求,a 标签 href 属性可以跳转,form 表单也可以跳转,但因为要求展示为按钮形式,所以请求由 js 发出。

<input type="submit" value=" 通过 " class="btn" onclick="if(confirm('确定要删除选中<?php echo $MOD['name'];?>吗?此操作将不可撤销')){window.location.href='?moduleid=<?php echo $moduleid;?>&file=<?php echo $file;?>&action=check_push&itemid=<?php echo $v['itemid'];?>'}else{return false;}"/>

简化一下点击事件的回调函数内容

if (confirm('...')) {
    window.location.href = '...';
} else {
    return false;
}

确认后,跳转请求;取消则无操作。

但是不知为何,window.location.href 修改不起作用(chrome 浏览器下)。值没有发生改变,页面有跳转,但是查看请求参数,根本不对。更像是刷新了一下当前页面。

仔细检查对比修改前和预期修改后的的 window.location.href 属性:

// 修改前的
// console.log(window.location.href)
"http://lejiao.jason.com/admin.php?moduleid=6"
// 预期修改后的
"?moduleid=-4&file=index&action=check_push&itemid=1174"

怀疑是不是链接拼接的不完整,访问地址本身有问题。

于是拆解 href,获取 ? 前面部分的内容,再拼接上现有的参数。

var uri_arr = window.location.href.split("?");
window.location.href = uri_arr[0] + "?moduleid=-4&file=index&action=check_push&itemid=1174";

输出对比,两者形式一致了,但是修改 window.location.href 值进行跳转,仍然无效。

从未听说过设置 window.location.href 有不起作用的情况,上网搜索也没有结果。另辟蹊径,想到是不是可以修改 iframe 本身的 src 属性,这样也能跳转。

还是在 chrome 环境下,跳转是成功的。

var uri_arr = window.location.href.split("?");
window.parent.document.getElementsByName('main')[0].src = uri_arr[0] + href;

以为解决了问题,就提交代码给产品。然后产品反馈说按钮点击并没有作用,一直在刷新页面。

我第一反应是不可能啊,然后询问了一下她测试的浏览器,不一样,她用的是 360 浏览器 的和 QQ 浏览器。

第二反应是,难道这个设置 iframe src 属性进行跳转页面的方法也有兼容问题?

折腾一会儿未果,就把设置 location.href 属性的语句取消注释,放到 iframe src 属性语句前面,发现 input 按钮类型为 submit,就顺手改回了 button ,又能跳转了。难道真的是兼容性问题。

控制变量发现,是 input submit 属性在捣乱。

window.location.href 和 iframe.src 设置都是有效的。

但因为使用的是 destoon 框架,请求发出后会记录一个 forword 变量,存储跳转原页面地址。 iframe.src 设置会使得 main 页面展示错乱。不太清楚原理,但在这种情况下,只能用设置 window.location.href 的方法了。