如何修改JavaScript搜索代码实现新标签页打开搜索结果？

问题根源 #

你代码里的window.location = 链接是强制当前标签页跳转，这会完全忽略a标签的target="_blank"设置，而且你根本没触发a标签的点击事件，所以a标签的属性自然没效果。另外你的a标签还有语法错误，未正确闭合。

方案一：利用已有的a标签触发跳转 #

1. 先修复a标签的语法错误，把<a href="" target="_blank" id=lnk </a>改成<a href="" target="_blank" id="lnk"></a>
2. 修改每个函数，删掉window.location那行，换成触发a标签的点击事件

修改后的完整代码：

<script>
function changeText1(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "https://www.google.co.uk/search?q=" + userInput ;
    lnk.innerHTML = lnk.href;
    // 触发a标签的点击事件，利用它的target="_blank"打开新标签
    lnk.click();
}
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "https://www.dogpile.com/serp?q=" + userInput;
    lnk.innerHTML = lnk.href;
    lnk.click();
}
function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "https://uk.search.yahoo.com/search?p=" + userInput;
    lnk.innerHTML = lnk.href;
    lnk.click();
}
</script>

<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText1()' value='google'/>
<input type='button' onclick='changeText2()' value='Dogpile'/> 
<input type='button' onclick='changeText3()' value='Yahoo'/>
<a href="" target="_blank" id="lnk"></a> <br>

方案二：直接用window.open打开新标签页（更简洁） #

不需要依赖a标签，直接在函数里用window.open指定新标签打开，逻辑更独立：

修改后的完整代码：

<script>
function changeText1(){
    var userInput = document.getElementById('userInput').value;
    var url = "https://www.google.co.uk/search?q=" + userInput ;
    // 用window.open打开新标签，第二个参数设为_blank
    window.open(url, '_blank');
    // 如需保留a标签显示链接，可保留下面两行
    var lnk = document.getElementById('lnk');
    lnk.href = url;
    lnk.innerHTML = url;
}
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var url = "https://www.dogpile.com/serp?q=" + userInput;
    window.open(url, '_blank');
    var lnk = document.getElementById('lnk');
    lnk.href = url;
    lnk.innerHTML = url;
}
function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var url = "https://uk.search.yahoo.com/search?p=" + userInput;
    window.open(url, '_blank');
    var lnk = document.getElementById('lnk');
    lnk.href = url;
    lnk.innerHTML = url;
}
</script>

<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText1()' value='google'/>
<input type='button' onclick='changeText2()' value='Dogpile'/> 
<input type='button' onclick='changeText3()' value='Yahoo'/>
<a href="" target="_blank" id="lnk"></a> <br>

补充说明 #

• 方案一适合需要保留a标签显示链接的场景，复用了a标签的target配置
• 方案二更直接，不依赖a标签的点击逻辑，代码结构更清晰

内容的提问来源于stack exchange，提问作者Ian