JavaScript中window.open仅刷新后生效问题及点击新标签页需求

嘿，我来帮你排查这个问题～

问题根源 #

你当前的代码里，url变量是在页面加载完成时就获取了#largeImage的href值。但如果这个链接的href是动态变化的（比如通过其他脚本在页面加载后修改过），那初始获取的url就会是旧值，只有刷新页面重新加载时，才会拿到最新的href——这就是为什么只有刷新后功能才正常的原因。

修复方案 #

把获取href的逻辑移到点击事件内部，这样每次点击时都会读取当前最新的链接值：

$("#largeImage").click(function(e){
    e.preventDefault();
    // 每次点击时才获取最新的href
    var url = $(this).attr("href");
    var win = window.open(url);
});

或者用原生JS的写法也可以：

$("#largeImage").click(function(e){
    e.preventDefault();
    var url = document.getElementById("largeImage").getAttribute("href");
    var win = window.open(url);
});

额外提示 #

如果修复后还是遇到弹窗被浏览器拦截的情况，可以给window.open添加一些标准参数（不过现在大部分浏览器对弹窗的限制比较严格）：

var win = window.open(url, '_blank', 'width=800,height=600');

同时可以考虑在代码里添加弹窗是否成功打开的判断，给用户提示：

if (!win) {
    alert('弹窗被浏览器拦截了，请允许本站的弹窗权限～');
}

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