使用锚标记中的 javascript window.open(elementName.elementValue) 在新选项卡中打开页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10166596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open page in new tab using javascript window.open(elementName.elementValue) in anchor tag
提问by Jeff
I've examined tons of examples over the past couple days, but still can't find an answer to my dilemma. In order for me to explain my dilemma first I'll show you an example of something I have that works, then explain how I would rather it work (but can't seem to achieve).
在过去的几天里，我检查了大量的例子，但仍然找不到解决我的困境的答案。为了让我首先解释我的困境，我将向您展示一个我有的东西的例子，然后解释我希望它如何工作（但似乎无法实现）。
This works:
这有效：
<form>
<select name="url">
<option selected="selected" value=""> Choose Donation Amount </option>
<option value="http://www.url1.com">URL#1</option>
<option value="http://www.url2.com">URL#2</option>
<option value="http://www.url3.com">URL#3</option>
<option value="http://www.url4.com">URL#4</option>
<option value="http://www.url5.com">URL#5</option>
<option value="http://www.url6.com">URL#6</option>
</select>
<input type="submit" value="Submit" onclick="if (url.value) window.open(url.value);" />
</form>
But what I'd rather do is capture the option and open the URL using an anchor tag (rather than input[type"submit"]), something like this (to replace the input tag before the closing form tag):
但我宁愿做的是捕获选项并使用锚标记（而不是 input[type"submit"]）打开 URL，类似这样（替换结束表单标记之前的输入标记）：
<a href="javascript:void(if (url.value) window.open(url.value));" target="_blank">Submit</a>
The above line doesn't work, and I can't figure out how to form it correctly. Help?
上面的行不起作用，我不知道如何正确地形成它。帮助？
I know this doesn't seem logical, especially since I already have it working using a submit button, but it's also not practical for me to explain exactly why I don't want to use input or button type="submit", , or PHP. Please, it really needs to be inline javascript in an anchor tag. Thanks.s :-)
我知道这似乎不合逻辑，尤其是因为我已经使用提交按钮让它工作了，但我也无法准确解释为什么我不想使用 input 或 button type="submit", , 或PHP。拜托，它确实需要在锚标记中嵌入 javascript。谢谢.s:-)
回答by PrimosK
回答by Hirav
I don't know why you have use the form if you just want to open a URL while selecting an option. Read the code below:
如果您只想在选择选项时打开 URL，我不知道为什么要使用该表单。阅读下面的代码：
<select name="url" onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
This works well on every browser Even on IE5.
这适用于所有浏览器，甚至在 IE5 上。
回答by Tina CG Hoehr
This worked so far, though it's long
到目前为止，这有效，虽然它很长
<a href="javascript:void((function(){ val=document.getElementsByName('url')[0].value; if(val) window.open(val)})())">click</a>
<a href="javascript:void((function(){ val=document.getElementsByName('url')[0].value; if(val) window.open(val)})())">click</a>
回答by Tony
You can forget about using JavaScript because the browser controls whether or not it opens in a new tab. Your best option is to do something like the following instead:
您可以忘记使用 JavaScript，因为浏览器会控制它是否在新选项卡中打开。您最好的选择是执行以下操作：
<form action="http://www.yoursite.com/dosomething" method="get" target="_blank">
<input name="dynamicParam1" type="text"/>
<input name="dynamicParam2" type="text" />
<input type="submit" value="submit" />
</form>
This will always open in a new tab regardless of which browser a client uses due to the target="_blank"attribute.
由于该target="_blank"属性，无论客户端使用哪种浏览器，这都将始终在新选项卡中打开。
If all you need is to redirect with no dynamic parameters you can use a link with the target="_blank"attribute:
如果您只需要在没有动态参数的情况下重定向，您可以使用具有以下target="_blank"属性的链接：
<a href="http://www.youresite.com" target="_blank">redirect</a>
回答by Nuwan
We also had a similar requirement. We wanted to generate the href url from the server side using an ajax call when the user clicks it. after doing lots of searching we found out that it is actually controlled by the browser. In chrome the newly opened page opens up as a popup and it is blocked by the popup blocker. Most users of our application were confused by that behavior. This is the workaround we used. Hope this will help someone who has the similar problem.
我们也有类似的要求。我们希望在用户单击它时使用 ajax 调用从服务器端生成 href url。经过大量搜索，我们发现它实际上是由浏览器控制的。在 chrome 中，新打开的页面作为弹出窗口打开，并被弹出窗口阻止程序阻止。我们应用程序的大多数用户都对这种行为感到困惑。这是我们使用的解决方法。希望这会帮助有类似问题的人。
We can have a regular link that points to an actual web page we have in our site called LandingPage.html. We have to set the target to "_blank" to open the window in the same browser tab.
我们可以有一个常规链接，指向我们网站中名为 LandingPage.html 的实际网页。我们必须将目标设置为“_blank”才能在同一浏览器选项卡中打开窗口。
<a href="LandingPage.html" id="fakeLink" target="_blank">Click to open google in the same browser window</a>
We then attached to the click event of the fakeLink anchor element.
然后我们附加到 fakeLink 锚元素的点击事件。
$('#fakeLink').click(function(){
$.ajax({
url: ""
}).done(function() {
localStorage.setItem('url', 'https://www.google.lk');
});
});
We can perform the ajax call and retrieve the dynamically generated url from the server. then we can add that url to localstorage.
我们可以执行ajax调用并从服务器检索动态生成的url。然后我们可以将该网址添加到本地存储。
Landing page can have a text to indicate to the users that they will be redirected in a second. "You will be redirected to google in 1 second."
登陆页面可以有一个文本来向用户表明他们将在一秒钟内被重定向。“你将在 1 秒内被重定向到谷歌。”
In the landing page, we can have a settimeout and inside that function, we can use a window.location to redirect user to the actual page.
在登陆页面中，我们可以有一个 settimeout 并且在该函数中，我们可以使用 window.location 将用户重定向到实际页面。
setTimeout(function(){
window.location.assign(localStorage.getItem('url'));
}, 1000);
Hope this helps, This should work in all browsers, i only checked in IE 10 and Chrome since we are not using any browser related things.
希望这会有所帮助，这应该适用于所有浏览器，我只检查了 IE 10 和 Chrome，因为我们没有使用任何与浏览器相关的东西。
