Question

function search(newWindow){
    var searchInput = $("#searchField").attr('value');
    var link = "foobar/"+searchInput;
    if(newWindow){
        window.open(link, '_blank');
    }else{
        window.open(link, '_self');
    }   
}
$(document).ready(function() {
    $("#searchField").on('keypress', function(e) {
        if(e.which == 13) {
            search(false);
        }
    });
    $("#searchButton").on('click', function(e) {
        var newWindow = false;
        if(e.ctrlKey){
            newWindow = true;
        }
        search(newWindow);
    });
});

我正在创建一个代码，它看起来像一个按钮，试图表现得像一个链接。请求是能够单击按钮并在新窗口或同一窗口上打开，因此我使用ctrl作为参数来确定程序将采取的操作。

需要以下测试用例。

输入＆＃34; searchField＆＃34;然后按Enter键。
预期结果：打开同一页面上的链接
获得的结果：链接在同一页面上打开

输入＆＃34; searchField＆＃34;并点击链接
预期结果：打开同一页面上的链接
获得的结果：页面闪烁，页面未加载

键入＆＃34; searchField并按ctrl，然后点击链接
预期结果：在新页面上打开链接
获得的结果：链接在新页面上打开

好的，事实证明两种方法（点击链接并按回车键）都使用相同的方法，即搜索（错误），但是一个正在运行而另一个正在运行。为什么呢？

我已经尝试过使用window.location.href，我已经尝试过调试代码

谢谢

Answer 1

除window.location.href = link;中的else外，看起来（并且正常）：

function search(newWindow) {
  var searchInput = $("#searchField").attr('value');
  var link = "./foobar/" + searchInput;
  if (newWindow) {
    window.open(link, '_blank');
  } else {
    window.location.href = link; // <<<
  }
}

$(document).ready(function() {
  $("#searchField").on('keypress', function(e) {
    if (e.which == 13) {
      search(false);
    }
  });
  $("#searchButton").on('click', function(e) {
    var newWindow = false;
    if (e.ctrlKey) {
      newWindow = true;
    }
    search(newWindow);
  });
});

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<div>
  <form>
    <label for="searchField">Search:</label>
    <input type="text" id="searchField" name="searchField" />
    <a href="#" class="btn btn-default" id="searchButton">Go</a>
  </form>
</div>

window.open随意工作

1 个答案: