在新选项卡中打开链接
Opening a link in a new tab
我为我正在做的一个项目创建了一个网站。在网站的内容中,有一些可以访问的外部网页的链接。同时,当用户单击其中一个链接时,他将被带到指定的链接,并且他将不再在当前页面上。我想做的是当用户单击链接时,单击的链接中的指定网站显示在新选项卡中。这样,用户就可以停留在当前页面上,也可以在新选项卡上查看另一个页面。
我在互联网上查看了一下,发现这似乎很有用:
function externalLinks()
{
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++)
{
var anchor = anchors[i];
if(anchor.getAttribute("href"))
anchor.target = "_blank";
}
}
window.onload = externalLinks;
我面临的问题是我网站的导航栏包含锚标签。因此,现在如果用户单击导航栏上的链接,它将打开一个新选项卡。我希望只有当用户单击我网站内容中的链接时才会发生这种情况。因此,如果用户单击导航栏中的链接,则不应打开新选项卡,而应将他带到指定的目的地。
我尝试向内容中的所有链接添加一个类并使用getElementByClassName,但它仍然不起作用
任何人都可以帮我解决这个问题
你可以只使用 HTML:
<a target="_blank" href="YourAmazingURL">Click here for Amazing URL</a>
再比如:
<a target="_blank" href="http://www.google.com/">Google</a>
这利用了目标属性。
有关目标属性的详细信息:http://www.w3schools.com/tags/att_a_target.asp另外: http://www.w3schools.com/html/html_links.asp
编辑:
对于 XHTML,只需执行以下操作:
<a href="YourAmazingURL" onclick="window.open(this.href,'_blank');return false;">Click here for Amazing URL</a>
或者,再次:
<a href="http://www.google.com/" onclick="window.open(this.href,'_blank');return false;">Google</a>
你需要为此使用 javascript 吗?
如果没有,您可以将属性直接添加到 HTML 中的 a 标签中。
例如:<a href="http://www.google.co.uk" target="_blank">Google</a>
如果不需要javascript,这可能是一种更简单的方法。
如果你需要依赖 JavaScript:
基本上,您只需要更改if
条件(检查锚链接是否指向外部位置)。
因此,与其使用 if(anchor.getAttribute("href"))
,请使用 if(anchor.getAttribute("href") && anchor.hostname!==location.hostname)
.
通过一些代码清理,您的函数应如下所示:
function externalLinks() {
for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
var b = c[a];
b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank")
}
}
;
externalLinks();
你想用document.getElementById("theidgoeshere");
为此,请在链接中设置 id 属性,如下所示:
<a href="www.google.com" id="theidgoeshere">Google</a>
然后在你的JavaScript中
var anchor = document.getElementById("theidgoeshere");
if(anchor.getAttribute("href"))
anchor.target = "_blank";
另请注意,您可能希望不使用javascript。只需将target="_blank"
放入锚标记中即可。
- 在新选项卡中打开链接,但不使用_blank方法
- 如何禁用鼠标中键单击超链接以在新选项卡或新窗口中打开
- 如何在新选项卡中打开链接以及在当前选项卡中重定向
- 如何超链接在新选项卡中打开并携带一些变量的选择标记
- 如何防止iframe中的链接在新选项卡中打开
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 打开除域之外在新选项卡中打开的所有外部链接
- 提交表单的可能性(左-/中-/在新选项卡或窗口中打开-)单击html链接
- jQuery UI - 使用外部链接在选项卡中打开手风琴
- 为什么 jQuery .after() 不链接新元素
- 使用页面上其他位置的链接激活选项卡
- 在选择后链接输入选项
- 从另一个 HTML 页面检索 cookie - 基于链接的选项选择
- 使用jqueryeasyui,如何通过选项卡中的链接创建选项卡
- 使用JavaScript打开动态链接新窗口(但不是弹出窗口)
- 使用JavaScript打开链接新窗口(而不是选项卡),无需键入两次URL
- 使用jquery在点击链接到新选项卡中的URL时生成图像
- 我如何在不影响布局的情况下将链接放在选项1,选项2等
- Xlxs.js的“l"单元格超链接对象选项工作
- JSP下拉列表,有3个相互链接的选项