Javascript 如何打开新标签页？答案

【问题标题】：Javascript How to open a new tab?Javascript 如何打开新标签页？
【发布时间】：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 更新答案。

标签： javascript getjson

【解决方案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'));
}

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：stackoverflow.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)

【讨论】：

这样，他需要设置一个服务器来解析请求查询中的信息，然后呈现信息