Javascript 如何打开新标签页？
Posted
技术标签:
【中文标题】Javascript 如何打开新标签页？【英文标题】：Javascript How to open a new tab? 【发布时间】：2021-11-24 13:20:34 【问题描述】：我使用getJson 创建了一个函数，允许用户搜索特定用户并显示他们的所有数据。
<body>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>
<script>
$('button').on('click', function()
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function(user)
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
$("#results").empty().append(p);
)
.fail(function(jqXHR)
console.log("Error: " + jqXHR.status);
)
.always(function()
console.log("Random Users Request finished");
);
);
</script>
</body>
例如，如果用户键入“mojombo”，则显示与用户“mojombo”相关的所有信息。
我目前希望修改此功能，以便通过单击用户名而不是搜索来访问此数据。例如，如果显示用户名“mojombo”并且用户单击该名称，则应打开一个新选项卡，显示与用户 mojombo 相关的所有信息。
我怎样才能做到这一点？
【问题讨论】：
用 sn-p 更新答案。 【参考方案1】：编辑：具体基于您的问题。您只需要将 target 属性添加到已有的 a 标签中即可。
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br;
这是一个sn-p。
$('button').on('click', function ()
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function (user)
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "' target='_blank'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
$("#results").empty().append(p);
)
.fail(function (jqXHR)
console.log("Error: " + jqXHR.status);
)
.always(function ()
console.log("Random Users Request finished");
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>【讨论】：
大声笑，我以为他要求在浏览器上打开一个新标签 我相信这是正确的或接近它，但是当我实现它时，我搜索时没有用户出现 啊，你只需要更改 hompageUrl 的 a 标签 var homeURl = "Homepage URL: " + "" + user.html_url + "" + br;【参考方案2】：$('button').on('click', function(e)
window.open($(e.currentTarget).attr('href'));
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?【参考方案3】：据我所知你的问题
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<input id="search" type="text">
<button>Search</button>
<div id="results"></div>
<script>
const html = $("<html></html>");
$('button').on('click', function()
var user = $('#search').val();
$.getJSON("https://api.github.com/users/" + user)
.done(function(user)
var br = "<br>";
var p = $("<p id='users'></p>");
var name = "Username: " + user.login + br;
var pic = "Avatar Picture:" + br + "<img src='" + user.avatar_url + "'/>" + br;
var homeURl = "Homepage URL: " + "<a href='" + user.html_url + "'>" + user.html_url + "</a>" + br;
var location = "Location: " + "Null" + br;
var admin = "Admin: " + user.site_admin;
p.append("<p>" + name + pic + homeURl + location + admin + "</p>");
html.append($('<body>').append(p));
var w = window.open("");
w.document.write(html.html())
)
.fail(function(jqXHR)
console.log("Error: " + jqXHR.status);
)
.always(function()
console.log("Random Users Request finished");
);
);
</script>
</body>
</html>
【讨论】：
关闭，抱歉，如果我的问题不清楚，哈哈，但是当用户搜索某人并显示该数据时，他们可以单击用户名以查看有关该用户的更多信息 @dylzee 为您解答：)【参考方案4】：创建一个页面，用于查看详细信息并通过 GET 向页面传递数据。
window.open('example.com/detail?avatarUrl=' + user.avatar_url + "&htmlUrl=" + user.html_url)
【讨论】：
这样，他需要设置一个服务器来解析请求查询中的信息，然后呈现信息以上是关于Javascript 如何打开新标签页？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 onclick="javascript:location.href" 打开新标签页？