在锚标记中使用 javascript window.open(elementName.elementValue) 在新选项卡中打开页面答案

【问题标题】：Open page in new tab using javascript window.open(elementName.elementValue) in anchor tag在锚标记中使用 javascript window.open(elementName.elementValue) 在新选项卡中打开页面
【发布时间】：2012-04-27 08:07:27
【问题描述】：

在过去的几天里，我检查了大量的例子，但仍然找不到解决我的困境的答案。为了让我首先解释我的困境，我将向您展示一个我拥有的东西的示例，然后解释我希望它如何工作（但似乎无法实现）。

这行得通：

<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>

但我更愿意做的是捕获选项并使用锚标记（而不是 input[type"submit"]）打开 URL，如下所示（在关闭表单标记之前替换输入标记）：

<a href="javascript:void(if (url.value) window.open(url.value));" target="_blank">Submit</a>

上面的行不起作用，我不知道如何正确形成它。帮忙？

我知道这似乎不合逻辑，特别是因为我已经使用提交按钮让它工作了，但我也不实际解释为什么我不想使用输入或按钮 type="submit" , , 或 PHP。拜托，它确实需要在锚标记中嵌入 javascript。谢谢.s :-)

【问题讨论】：

标签： javascript href window.open

【解决方案1】：

添加您的表单name 属性，例如：

<form name="form">

...然后像这样尝试：

<a href="" onclick="window.open( form.url.value, 'windowName' ); return false" target="_blank">Submit</a>

有一个工作的example。

【讨论】：

这适用于 Chrome 18，但不适用于 Firefox 10（在 OS X 10.6 上运行）。我还没有测试过其他浏览器/平台。在 FF 中它只是打开一个空白页。
我明白了..你说得对..我更新了答案..这不是最好的解决方案，但它有效..
谢谢！！这是适合我需要的解决方案！我真的很感激这一点。 :-)

【解决方案2】：

到目前为止，这很有效，虽然它很长

<a href="javascript:void((function(){ val=document.getElementsByName('url')[0].value; if(val) window.open(val)})())">click</a>

【讨论】：

【解决方案3】：

如果您只是想在选择一个选项时打开一个 URL，我不知道您为什么要使用该表单。阅读下面的代码：

<select name="url" onchange="window.open(this.options[this.selectedIndex].value,'_blank')">

这适用于所有浏览器，即使在 IE5 上也是如此。

【讨论】：

【解决方案4】：

您可以忘记使用 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>

由于target="_blank" 属性，无论客户端使用哪种浏览器，这将始终在新选项卡中打开。

如果您只需要在没有动态参数的情况下进行重定向，您可以使用带有target="_blank" 属性的链接：

<a href="http://www.youresite.com" target="_blank">redirect</a>

【讨论】：

【解决方案5】：

我们也有类似的要求。我们希望在用户单击它时使用 ajax 调用从服务器端生成 href url。经过大量搜索，我们发现它实际上是由浏览器控制的。在 chrome 中，新打开的页面作为弹出窗口打开，并被弹出窗口阻止程序阻止。我们应用程序的大多数用户都对这种行为感到困惑。这是我们使用的解决方法。希望这对有类似问题的人有所帮助。

我们可以有一个常规链接，该链接指向我们网站中名为 LandingPage.html 的实际网页。我们必须将目标设置为“_blank”才能在同一浏览器选项卡中打开窗口。

<a href="LandingPage.html" id="fakeLink" target="_blank">Click to open google in the same browser window</a>

然后我们附加到 fakeLink 锚元素的点击事件。

 $('#fakeLink').click(function(){
        $.ajax({
            url: ""
        }).done(function() {
            localStorage.setItem('url', 'https://www.google.lk');
        });
    });

我们可以执行 ajax 调用并从服务器检索动态生成的 url。然后我们可以将该 url 添加到 localstorage。

登陆页面可以有一个文本来向用户表明他们将在一秒钟内被重定向。 “您将在 1 秒后被重定向到 google。”

在登录页面中，我们可以设置一个 settimeout，在该函数中，我们可以使用 window.location 将用户重定向到实际页面。

 setTimeout(function(){
        window.location.assign(localStorage.getItem('url'));
    }, 1000);

希望这有帮助，这应该适用于所有浏览器，我只检查了 IE 10 和 Chrome，因为我们没有使用任何与浏览器相关的东西。

【讨论】：