Javascript 如何禁用浏览器中的“在新标签中打开链接”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7006178/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 00:14:33  来源:igfitidea点击:

How to disable the 'Open Link in New Tab' in the browser?

javascriptbrowsercross-browser

提问by grai

How do I disable/remove the 'Open Link in New Tab' option in the right-click menu of the browser? If this is not possible with javascript etc then is there a way to modify what happens when the user clicks on this link, for example, display an alert or prevent the tab from loading..?

如何禁用/删除浏览器右键菜单中的“在新标签页中打开链接”选项?如果使用 javascript 等无法做到这一点,那么有没有办法修改用户单击此链接时发生的情况,例如,显示警报或阻止选项卡加载..?

采纳答案by grai

Have solved the main issue now, quite easily as it turned out just by passing the query string of the href to an ajax function.

现在已经解决了主要问题,结果很容易,只需将 href 的查询字符串传递给 ajax 函数即可。

I probably should have explained in my question that what I wanted was intended only as a temporary measure. Anyway thanks for all the comments.

我可能应该在我的问题中解释我想要的只是作为一种临时措施。无论如何,感谢所有评论。

回答by Phil Klein

The ability to open a link in a new tab/window is native functionality of many browsers. If you do not wish to allow this type of activity, then you need to notify the browser that your link is not truly a link. The easiest way to do so is to remove the hrefattribute from your aelement.

在新选项卡/窗口中打开链接的能力是许多浏览器的本机功能。如果您不希望允许此类活动,则需要通知浏览器您的链接不是真正的链接。最简单的方法是hrefa元素中删除该属性。

HTML:

HTML:

<a href="http://google.com">Can be opened in new tab/window</a>
<a>Cannot be opened in new tab/window</a>

Now there are some other things that the browser may be doing for you by default when it sees a link. If you have not defined any styling of aelements, it's likely that your new fancy pseudo-link will not appear with a link font-color, pointer, and underline. You can go ahead and do that easily enough.

现在,浏览器在看到链接时可能会默认为您执行一些其他操作。如果您还没有定义任何a元素样式,那么您的新奇特的伪链接很可能不会与链接字体颜色、指针和下划线一起出现。您可以继续轻松地做到这一点。

CSS:

CSS:

a {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

That hopefully answers the question of how you disable/remove the 'Open Link in New Tab' option in the right-click menu of the browser. For some extra credit though I'm going to assume that you probably want the link to still function like a regular link when clicked. Feel free to use some JavaScript to make that happen. Here's an example using jQuery:

这有望回答您如何禁用/删除浏览器右键单击菜单中的“在新选项卡中打开链接”选项的问题。对于一些额外的信用,尽管我将假设您可能希望链接在单击时仍然像常规链接一样起作用。随意使用一些 JavaScript 来实现这一点。下面是一个使用 jQuery 的例子:

JavaScript:

JavaScript:

$("body").on("click", "a[data-href]", function() {
    var href = $(this).data("href");
    if (href) {
        location.href = href;
    }
});

Modified Html:

修改后的 HTML:

<a href="http://google.com">Can be opened in new tab/window</a>
<a data-href="http://google.com">Cannot be opened in new tab/window</a>

Modified CSS:

修改后的 CSS:

a[href], a[data-href] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

Hope this helps!

希望这可以帮助!

回答by evilReiko

2019

2019年

I'll highlight 2 important comments:

我将强调 2 条重要评论:

  1. nnnnnn@ Aug 10 '11 at 5:49 :

    As a user I would prefer that type of feature be triggered from a button rather than a link. I expect links to work in a more standard way including giving me the option to right-click for the menu or to middle-click to open directly in a new tab.

  2. Pars@ Dec 21 '13 at 13:10 :

    this wont work when you click by mouse middle button or hold CTRL and click on a link. how to those cases.

  1. nnnnnn@ 2011 年 8 月 10 日 5:49 :

    作为用户,我更喜欢通过按钮而不是链接来触发这种类型的功能。我希望链接以更标准的方式工作,包括为我提供右键单击菜单或中键单击以直接在新选项卡中打开的选项。

  2. Pars@ 2013 年12 月 21 日 13:10:

    当您单击鼠标中键或按住 CTRL 并单击链接时,这将不起作用。如何处理那些情况。

It's up to the browser to decide whether it gets the link-behavior or not.

由浏览器决定是否获得链接行为。

Some modern browser (like Chrome) will consider it a link if allthe below conditions matches:

如果以下所有条件都匹配,一些现代浏览器(如 Chrome)会认为它是一个链接:

  1. It's an <a>...</a>tag (not span, div, button, etc).
  2. It has hrefattribute.
  3. hrefattribute is not empty.
  1. 这是一个<a>...</a>标签(不spandivbutton,等)。
  2. 它有href属性。
  3. href属性不为空。

The below will getthe link-behavior:

下面将获得链接行为:

<a href="http://www.website.com">Click Here</a>

The below will NOT getthe link-behavior:

以下不会获得链接行为:

<a>Not link because no href</a>
<a href="">Not link because empty href</a>
<span>Not link because not "a" tag</span>
<span href="http://www.website.com">Not link because not "a" tag again</span>

Important Note:

重要的提示:

Again, it's up to the browser to decide. Some old/stupid browsers may give it link-behavior if ANY of the 3 conditions above matches!

同样,由浏览器决定。如果上述 3 个条件中的任何一个匹配,一些旧的/愚蠢的浏览器可能会给它链接行为

Conclusion

结论

If it's a link then use <a href="some_link">...</a>. If it's not a link then use something else, like <button>.

如果是链接,则使用<a href="some_link">...</a>. 如果它不是链接,则使用其他内容,例如<button>.

回答by Kumar

I am not sure why would some one downvote your question, what you need to google is how to hiHyman events using javascript. You can very well show an alert when you click a link and stop it from working. jQuery is a populat JS toolkit and has a method to stop default events on an element, in plain English, using jQuery you can stop a hyperlink from working it and show an alert as well. This link http://api.jquery.com/event.preventDefault/can help you further. Regarding disabling the context menu that appears on right clicking on a webpage, yes that is very much possible. I am not a JS ninja so can't comment if you can remove an item from context menu but IMO, it should not be possible.

我不知道为什么有人会反对你的问题,你需要谷歌的是如何使用 javascript 劫持事件。当您单击链接并停止工作时,您可以很好地显示警报。jQuery 是一个流行的 JS 工具包,它有一种方法可以停止元素上的默认事件,简单来说,使用 jQuery,您可以停止超链接的工作并显示警报。此链接http://api.jquery.com/event.preventDefault/可以进一步帮助您。关于禁用右键单击网页时出现的上下文菜单,是的,这是很有可能的。我不是 JS 忍者,因此无法评论是否可以从上下文菜单中删除项目,但 IMO 应该不可能。