在新页面打开链接 本来是一个非常简单的需求，但是由于chrome为了保护用户访问更加省心，直接默认屏蔽了弹窗页面以及重定向。
直接影响就是：原本用JS的window.open的方式在新标签页打开的方式失效了，这可难为我这个初级前端了。
尝(挣)试(扎)如下：
姿势1：
1
| window.open('https://www.baidu.com');
|
直接被拦截
姿势2：
在click/keyup等其他事件时先开启一个空窗口,然后异步修改新的弹窗页面的location。
1
2
3
| var testNewWindow = window.open();
// await correctUrl
testNewWindow.location.href = correctUrl;
|
再次被拦截
姿势3：
模拟创建A标签，然后再trigger(‘click’);
被拦截：不是用户操作产生的窗口直接被阻止了。
姿势N。。。
.
.
.
皇天不负有心人，总算被我整出来一个 很靠谱的方案了
chrome 71版本亲测有效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| // window.newWindowName 是为了统一 跳转器命名，并且保持随机关系，如果不随机，将只能打开一个页面
window.newWindowName = 'page'+(new Date().getTime());
/*openInNewTab实现：增加用户行为触发*/
var openInNewTab = function(url) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", window.newWindowName);
document.body.appendChild(a);
a.click();
}
// 更新已打开窗口的url
function updateNewWindowUrl(url) {
var newWindow = window.open(null, window.newWindowName);
newWindow.location.href = url;
}
// 在click等事件中，先触发`openInNewTab('about:blank')`;
// 然后获得正确的 newUrl 地址后 `updateNewWindowUrl(newUrl)`;
// 为了保证同一个页面新打开不同的窗口，请再 `updateNewWindowUrl`之后 再次给`window.newWindowName`重新赋值
-----------------------
e.g:
$('body').on('click', anyDom, function() {
openInNewTab('about:blank');
/*
* 此处去获取到要跳转的url地址
*/
updateNewWindowUrl(newUrl);
window.newWindowName = 'page'+(new Date().getTime());
});
window.newWindowName = 'page'+(new Date().getTime());
function openInNewTab(url) {
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", window.newWindowName);
document.body.appendChild(a);
a.click();
}
function updateNewWindowUrl(url) {
var newWindow = window.open(null, window.newWindowName);
newWindow.location.href = url;
}
|
BTY, merry christmas(我的代码没有彩蛋，请放心使用)
Yours Sincerely AppleSun
