logo标签列表

窗口位置在新标签页中打开

javascriptjqueryhtml
5

我有一个包含select列表的链接，当我点击“前往”按钮时，它会跳转到外部链接。但是链接会在同一窗口中打开。我想让它在新窗口中打开。以下是我的代码。

 <select id="my-dropdown" name="my-dropdown">
    <option value="http://www.google.com">A</option>
    <option value="http://www.aol.com">B</option>
 </select>
 <button class="go-btn" type="submit">Go</button>

Javascript :

$('.go-btn').click(function() {
   window.location = $('#my-dropdown').val();
});

有人能帮忙吗？

一些建议的答案会触发弹出窗口拦截器。这对您是否有影响？ - colecmc
8个回答
4
使其变得更好
$('.go-btn').click(function() {
   window.open( $('#my-dropdown').val() );
});

或者
$('.go-btn').click(function() {
   window.open( $('#my-dropdown').val(), "_newtab" );
});
0

这里有一种不会触发浏览器弹出拦截器的不同方法，就是使用动态创建链接，将下拉菜单中的值和target="_blank"一起使用，然后强制点击该链接。

在 jsbin 上查看示例。

    var setAttributes = function(d, b) {
  for (var h in b) b.hasOwnProperty(h) && d.setAttribute(h, b[h]);
  return d;
};

var makeLink = function(id, href) {
  var link = document.createElement('a'),
    attr = {
      'id': id,
      'href': href,
      'target': '_blank',
      'style':'display:none'
    };

  link.insertAdjacentHTML('beforeend', href);
  return setAttributes(link, attr);
};

$(document).ready(function() {
  $('.go-btn').click(function() {
    var theLink,myLink = makeLink('the-link', $('#my-dropdown').val());

    document.body.insertAdjacentHTML('beforeend',myLink.outerHTML);
    theLink = document.getElementById('the-link');
    console.log(theLink);
    theLink.click();
    theLink.parentElement.removeChild(theLink);
  });
});
<!DOCTYPE html>
<html>

<head>
  <title>Open in new tab - No pop up blocker</title>
  <meta charset="utf-8">
</head>

<body>

  <select id="my-dropdown" name="my-dropdown">
    <option value="http://www.google.com">A</option>
    <option value="http://www.aol.com">B</option>
    <option value="http://stackoverflow.com/">C</option>
  </select>
  <button class="go-btn" type="submit">Go</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

0

我认为你也可以尝试这个

window.open($('#my-dropdown').val(), '_blank');
0

尝试使用window.open()：

$('.go-btn').click(function() {
 window.open($('#my-dropdown').val(), '_blank');
});

工作演示

0

纯Javascript解决方案：

<select id="my-dropdown" name="my-dropdown">
  <option value="www.google.com">A</option>
  <option value="www.aol.com">B</option>
</select>
<button class="go-btn" type="button" onclick="go();">Go</button>

<script>
  function go() {
    var e = document.getElementById("my-dropdown");
    var url = e.options[e.selectedIndex].value;
    window.open(url, "_newtab");
  };
</script>
0
请检查这个。
<select id="my-dropdown">                     
    <option value="http://www.google.com">A</option>
    <option value="http://www.facebook.com">B</option>
</select>
<button class="go-btn" type="submit">Go</button>

$(document).ready(function(){
   $('.go-btn').click(function() {
      window.open($('#my-dropdown').val(), '_blank');
   }); 
});
0

你可以使用以下内容

$('.go-btn').click(function() {
   window.open( $('#my-dropdown').val(), "_blank" );
});
0

这里是如何在新标签页中打开它的方法，但我不确定如何在窗口中打开：

$('.go-btn').click(function() {
   window.open("#my-dropdown", "_blank");
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接