天道酬勤,学无止境

Bind click event to open a link in new tab

问题

我正在尝试在新选项卡中打开模式中的所有链接,并且由于使用角度的限制,操作 DOM 并不像我想象的那么容易。 有没有办法将点击事件绑定到链接,然后使该点击事件打开一个新选项卡?

我有这样的东西

w = angular.element($window)
w.bind 'click', (e) ->
  # if link clicked open link in new tab?    
回答1

你不能只在每个链接上使用 ng-click 吗?

<a href="#" ng-click="openLink('http://www.google.com')">Open link in new window</a>

在你的控制器中有这样的东西:

$scope.openLink = (link) ->
  window.open link
  return

或者只使用 html:

<a href="http://www.google.com" target="_blank">Open link in new window</a>
回答2

基本规则是,如果你要对 DOM 做任何事情,那么你应该有一个指令并在链接函数中使用普通 JQuery

new-tab.directive.coffee

angular.module 'my.module'
  .directive 'newTab', ($window) ->
    restrict: 'A'
    link: (scope, element, attributes) ->
      element.on('click', (evt)->
        # Open link in new tab here
      )

示例用法:

<a href='/your/link' new-tab>

您可能还必须做一些“防止默认”的事情,以便链接不会仍然转到当前窗口中的同一页面(现在我考虑了一下)。

您也可以尝试在任何和所有节点上设置 _target='blank' 属性。

我没有测试过这个

new-tab-a.directive.coffee

angular.module 'my.module'
  .directive 'a', -> #I doubt this is a good idea though using 'a' as a directive name.
    restrict: 'E'
    link: (scope, element, attributes) ->
      attributes.target = '_blank'

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Bind click event to open a link in new tab
    I'm trying to make all of the links in a modal open in a new tab, and due to the constraints of using angular, manipulating the DOM isn't as easy as I had thought it would be. Is there a way to bind a click event to the links and then make that click event open a new tab? I have something like this w = angular.element($window) w.bind 'click', (e) -> # if link clicked open link in new tab?
  • jQuery/JavaScript - 允许 CTRL + 单击以在新选项卡中打开链接(jQuery/JavaScript - Allow CTRL + Click to open link in new tab)
    问题
  • 如何将函数绑定到 DOM 事件一次且仅一次,以便它们在事件触发时不会第二次执行?(How to bind function to DOM events once and only once so that they will not execute for a second time in the triggering of event?)
    问题 所以我有<a href='[link'] rel='Tab'>形式的锚标签,我在页面加载时应用以下内容:(我的意思是“文档准备好”) jQuery("a[rel*=Tab]").click(function(e) { e.preventDefault();//then I do some stuff to open it in jq ui tab} 现在的问题是,当我执行此操作并稍后通过 javascript 生成新链接时,在我使用 JqGrid 加载第二页的情况下,有新的<a rel='neoTab'>在我第一次运行jQuery("a[rel*=Tab]").click(function(e)时不存在jQuery("a[rel*=Tab]").click(function(e)所以他们不会工作...所以我可以运行jQuery("a[rel*=Tab]").click(function(e)在每个创建新链接的事件中,然后旧链接会加载多个选项卡,所以有没有办法选择以前没有选择的所有“ a[rel*=Tab] ”? 注意:我可以并且已经通过算法方法解决了这个问题,你可以通过下面的细节看到,我只是认为有一些我不知道的语法来防止需要使用这个 hack! 不必要的细节: var neoTabitStat = 0; var openTabs = new Array(); openTabs
  • 如何检测浏览器窗口/选项卡关闭事件?(How to Detect Browser Window /Tab Close Event?)
    问题 我正在尝试onbeforeunload和Unload函数。 但这没有用。 单击链接或刷新时,触发了此事件。 我想要一个仅在关闭浏览器窗口或选项卡时才触发的事件。 该代码必须在所有浏览器中都有效。 我在母版页中使用以下代码。 <script type="text/jscript"> var leaving = true; var isClose = false; function EndChatSession() { var request = GetRequest(); request.open("GET", "../Chat.aspx", true); request.send(); } document.onkeydown = checkKeycode function checkKeycode(e) { var keycode; if (window.event) keycode = window.event.keyCode; else if (e) keycode = e.which; if (keycode == 116) { isClose = true; } } function somefunction() { isClose = true; } window.onbeforeunload = function (e) { if (!e) e = event
  • How to bind function to DOM events once and only once so that they will not execute for a second time in the triggering of event?
    so I have anchor tags in the form of <a href='[link'] rel='Tab'> and I apply the following at page load:('document ready' I mean) jQuery("a[rel*=Tab]").click(function(e) { e.preventDefault();//then I do some stuff to open it in jq ui tab} now the problem is that when I do this and later through javascript new links are generated, in my case with loading a second page with JqGrid there are new <a rel='neoTab'>'s that did not exist when I first run jQuery("a[rel*=Tab]").click(function(e) so they won't work... so I can run jQuery("a[rel*=Tab]").click(function(e) at every event that creates new
  • 如何使用 jquery 在新选项卡或窗口中捕获打开的链接?(how to capture open link in new tab or window using jquery?)
    问题 是否可以使用jQuery捕获在新窗口/选项卡中打开的右键单击或在新窗口/选项卡事件中打开鼠标滚轮? 更新 1 这就是我需要它的原因。 我有使用分页类的 codeigniter 应用程序。 我使用这个类来显示一个网格。 分页链接已与使用 AJAX 在容器 div 中加载下一页的方法绑定。 现在有人可以右键单击并在我不想要的新选项卡/窗口中打开下一页。 恕我直言,处理此问题的唯一方法是如何捕获(右键单击或鼠标滚轮按钮单击)在新窗口/选项卡事件中打开。 更新 2 我刚刚意识到我所有的 AJAX 请求都由一个 CI 控制器提供服务,该控制器实际上充当其他类/库的代理。 在这个控制器中,我可以查看请求,如果它不是 AJAX 请求,我可以将用户重定向到另一个页面。 回答1 一个变通的解决方案是用按钮替换所有适用的<a>元素,其中(显然)按钮将调用执行适当导航的 JavaScript。 如果你真的很热衷,你可以应用 CSS 使按钮看起来像<a>元素,但我不推荐这样做,因为它会使可能试图将它们视为标准链接并右键或中键单击它们的用户感到困惑。 (你甚至可以让它为没有启用 JavaScript 的用户工作,例如,让每个按钮都以自己的小形式成为提交按钮。) 回答2 至少您可以使用.mousedown() (或者,大概是mouseup() )单击鼠标右键。 有关更多信息,请参阅有关右键单击的
  • jQuery 卸载事件仅适用于关闭窗口,不适用于链接导航(jQuery unload event only for close window not for Link navigation)
    问题
  • 在 onclick 上确定单击的链接是否要打开新窗口或选项卡(Determine on onclick whether the clicked link is meant to open a new window or tab)
    问题 大多数现代浏览器都支持使用ctrl+click或command+click或类似命令在新选项卡或新窗口中打开链接。 在应用程序中,我希望链接在单击时被禁用。 但仅当目标是同一个窗口时(例如,如果它在新选项卡中打开,我不希望链接被禁用,因为再次单击它是合理的)。 我做了一些尝试并调试了单击时创建的事件对象 - 但我找不到有关目标是新选项卡还是新窗口的任何信息。 已知的解决方法:当然可以在单击特定链接时检查是否按下了某个键,这是一件简单的事情 - 但由于这些命令因浏览器和操作系统而异,因此必须定义复杂的映射和谁知道用户配置了什么等等。 有没有可靠的方法来确定该位置是否应该在新选项卡或窗口中打开? 回答1 这里有一个工作示例:http://jsfiddle.net/pioul/eCuNU/4/ 此脚本仅当链接将在新选项卡/窗口中打开时才允许单击链接,基于target="_blank"属性。 HTML: <a href="http://google.fr" target="_blank">new window</a> <a href="http://google.fr" target="_self">same window 1</a> <a href="http://google.fr" target="">same window 2</a> jQuery: $("a").bind(
  • how to capture open link in new tab or window using jquery?
    Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery? UPDATE 1 Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event. UPDATE 2 I just
  • 命令单击不会打开新选项卡,但中键单击会(Command-click doesn't open a new tab, but middle-click does)
    问题 在我的网站上,这是一个使用 Sammy.js 和 jQuery 的单页 JS 站点,当我用鼠标中键单击某个链接时,该链接会在新选项卡中打开。 但是当我在 Mac 上单击命令时,它没有。 这发生在 Firefox 和 Chrome 中,所以我认为它必须以某种方式符合规范。 这发生在 Macbook Air 上(所以触控板 + 命令按钮)。 不过,大多数站点都可以正常工作,命令单击与普通的中键单击相同。 自己尝试一下:https://circleci.com。 在“关于”、“主页”和“联系人”之间按住 Command 键单击,您应该会遇到问题 - 它们不会在新标签页中打开。 回答1 在这里推测,但稍后会从 Mac 确认。 这已被确认可在 Mac 上运行。 Win ctrl+click 或 Mac command+click 被“普通”单击侦听器拾取,就像使用任何其他修饰键(alt+click、shift+click 等)单击一样。 这尤其令人困惑,因为在 Mac 上按 ctrl+单击会被解释为在操作系统级别上单击鼠标右键。 另一方面,Command-click不会被解释为中键单击,而是一种浏览器首选项。 假设您没有专门依赖修改点击的站点内功能,那么将此类事件从点击侦听器中排除是合适的,而是允许它们冒泡由浏览器本地处理。 鉴于某人在类似情况下的经验
  • 如何设置新浏览器标签的标题?(How to set the title for the new browser tab?)
    问题 我有一个关于链接的新标签的问题。 无论如何,我可以在用户单击链接之前设置浏览器标签标题吗? 如果新选项卡中包含的 html 没有 title 属性,似乎无法讨论新选项卡的标题。 我对吗? 如何设置标题? //the href is dynamic so I can't set them one by one because I have 100+ html file here <a href="test.html" target="_blank">open me<a> 回答1 正如您所拥有的,这是不可能的,因为您的链接只是普通的 HTML 链接。 当新页面在新选项卡中打开时,当前页面将不会对其有任何引用,因此无法以任何方式对其进行更改。 您将需要使用 javascript 打开页面并以这种方式设置标题。 您可以动态此设置在window onload找到所有的a标签,并添加click whihc打开的窗口,并设置标题事件。 如果您希望每个页面有不同的标题,您可以将其存储在a标签的data-属性中。 请注意,这仅适用于同一域中的页面(出于安全考虑),并且它不处理人们右键单击并按“在新窗口中打开”。 但是,在 Windows 中单击鼠标中键似乎确实有效。 HTML <a href="test.html" data-title="A new page" target="_blank"
  • 选择选项卡和 onselect 代码冲突 - 无限重新加载页面(Selection tab and onselect code conflict - infinite reloading of page)
    问题
  • 使用 URI 哈希识别选项卡时防止滚动(Preventing scroll when using URI hash to identify tab)
    问题 我正在使用 JQuery UI 在我的应用程序中创建选项卡。 我需要标签是可链接的(打开页面并选择正确标签的直接链接)。 这是通过使用散列标签/分段标识符来完成的。 但是当标签和标签内的内容很长时间时,我有一个问题。 单击选项卡时,页面会向下滚动到选项卡的开头。 这不是我想要的。 我正在使用 Jquery 1.7.1 和 Jquery UI 1.8.16。 javascript/Jquery 代码是标准的 Jquery UI 选项卡,添加了事件“tabsshow”。 这是在使用 jquery ui 选项卡更改 location.hash(Stackoverflow 问题)和 JQuery UI 选项卡:在单击选项卡时使用哈希更新 URL(博客 - 罗宾的技术日记)中建议的 $(document).ready(function() { $("#tabs").tabs(); /** * Add hash to URL of the current page * * http://chwang.blogspot.com/2010/02/jquery-ui-tabs-updating-url-with-hash.html * https://stackoverflow.com/questions/570276/changing-location-hash-with-jquery-ui
  • 下载时打开和关闭新标签页(Opening and closing a new tab when downloading)
    问题 在许多网站上( Dropbox是一个很好的例子),当您单击文档进行下载时,它会打开一个新窗口/选项卡,然后出现下载提示,并且该选项卡/窗口会立即关闭(而提示仍保持打开状态) 。 如何使用javascript复制此行为? 我认为一种方法是检测该下载提示的外观,然后使用window.close() 。 但是,我不确定如何检测到该特定提示。 最好使用跨浏览器的解决方案,但是任何可以在Firefox中使用的方法都将受到高度赞赏。 澄清说明 我正在用Greasemonkey脚本执行此操作在新选项卡中打开的“链接”不一定是指向文档的直接链接。 有时它是一个简单的页面,在后台开始下载。 我指的是具有特殊“下载”页面的网站的类型……那些类似“您的下载将很快开始,如果没有开始,请单击此处”的网站。 更多说明:关于上面说明2中提到的网站类型,我要做的是单击下载链接,将特定的下载页面加载到新窗口中,并在启动下载后关闭该窗口。 。 回答1 您需要三个基本部分: 您必须拦截下载链接。 单击链接时,必须将其发送到新选项卡,而不仅仅是使用target="_blank"对其进行修改。 该选项卡必须使用javascript打开,以便在时间到时允许javascript将其关闭。 您的脚本还必须运行/处理“弹出窗口”选项卡,以便它可以检测何时关闭弹出窗口。 对于此讨论,请参考jsFiddle的此测试页。
  • 在新窗口中打开 Bootstrap 模式中的任何链接(Make any links in a Bootstrap modal open in a new window)
    问题 我有一个页面将内容加载到 Bootstrap (3.3.7) 模式窗口中。 这些模态中的大多数内容都具有 1 个或多个链接。 我希望用户在这些模态中单击的任何链接在新的浏览器选项卡中打开。 我可以通过在每个锚点上放置一个target="_blank"来实现这一点,例如 <a href="http://www.google.com/" target="_blank">Link</a> 但这似乎很乏味,因为每次我输出一个链接时,我都必须添加这个标签。 有没有办法告诉浏览器打开在新窗口/选项卡中的模式中找到的任何链接? 我已经四处搜索,但大多数答案都涉及在模态加载链接,这不是我想在这里做的。 我还希望模态在上一个选项卡中保持不变,即保持打开状态(不要关闭它)。 回答1 您可以通过针对元素的 jQuery 添加 target 属性: $('#modal-name a').attr('target', '_blank'); 或者您可以使用 window.open() 将事件绑定到锚点本身: $('#modal-name').on('click', 'a', function(event) { event.preventDefault(); window.open($(this).attr('href'), '_blank'); });
  • 如果我尚未通过bind或click绑定事件处理程序,是否可以调用jQuery的click()来跟随链接?(Can I call jQuery's click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?)
    问题 我的JavaScript中有一个计时器,该计时器需要模拟时间流逝后单击链接以转到另一个页面。 为此,我使用了jQuery的click()函数。 我还使用了$().trigger()和window.location ,并且可以使这三个函数按预期工作。 我已经观察到click()有一些奇怪的行为,并且试图了解会发生什么以及为什么。 我在这个问题中描述的所有内容都使用了Firefox,但是我也对其他浏览器将如何使用它感兴趣。 如果我还没有使用$('a').bind('click',fn)或$('a').click(fn)来设置事件处理程序,则调用$('a').click()似乎什么也没做。 它不会为此事件调用浏览器的默认处理程序,因为浏览器不会加载新页面。 但是,如果我先设置一个事件处理程序,那么即使该事件处理程序不执行任何操作,它也可以按预期工作。 $('a').click(function(){return true;}).click(); 这将加载新页面,就像我自己单击a一样。 所以我的问题是双重的:这是怪异的行为,因为我在某处做错了什么吗? 如果我还没有创建自己的处理程序,为什么调用click()对默认行为没有任何作用? 正如霍夫曼确定何时尝试复制我的结果一样,我上述的结果实际上并没有发生。 我不确定是什么导致了我昨天观察到的事件,但是今天我可以确定这不是我在问题中所描述的
  • 不使用`window.open`或`window.location.href`打开新窗口/标签(Opening new window/tab without using `window.open` or `window.location.href`)
    问题 我想生成一个在创建后立即单击的链接,但是没有任何反应 代码: var link = $("<a></a>"); link.attr("href", "/dostuff.php"); link.attr("target", "_blank"); link.click(); 属性设置正确: var link = $("<a></a>"); link.attr("href", "/dostuff.php"); link.attr("target", "_blank"); var linkcheck = link.wrap('<p>').parent().html(); console.log(linkcheck); 这将返回: <a href="/dostuff.php" target="_blank"></a> 没有错误 更新 我试图附加它,将其绑定到它,然后单击并删除它 var link = $("<a></a>"); link.attr( { id : "linky", href : "/dostuff.php", target: "_blank" }); $("body").append(link); $("#linky").on("click", function() { console.log("Link clicked"); }); $("#linky").click
  • 识别刷新和关闭浏览器操作(Identifying Between Refresh And Close Browser Actions)
    问题 当我们刷新页面(F5或浏览器中的图标)时,它将首先触发ONUNLOAD事件。 当我们关闭浏览器(右上角的X图标)时,它将触发ONUNLOAD事件。 现在,当触发ONUNLOAD事件时,无法区分刷新页面还是关闭浏览器。 如果您有任何解决方案,请给我。 回答1 有一个解决方案。 我想在关闭选项卡或浏览器窗口时,而不是在重新加载页面时,断开服务器上的用户的连接(您可能出于不同的目的而区分重新加载/关闭事件,但您可能会从我的解决方案中受益)。 基于HTML5的本地存储和客户端/服务器AJAX通信,我完成了以下过程: 在页面上,将onunload添加到window中的以下处理程序(pseudo-javascript): function myUnload(event) { if (window.localStorage) { // flag the page as being unloading window.localStorage['myUnloadEventFlag']=new Date().getTime(); } // notify the server that we want to disconnect the user in a few seconds (I used 5 seconds) askServerToDisconnectUserInAFewSeconds()
  • AngularJS - 通过控制器有条件地路由时在新选项卡中打开链接(AngularJS - Open link in new tab when conditionally routing via controller)
    问题 在我的应用程序中,我有两种类型的组织配置文件。 当用户单击个人资料名称时,我首先需要检查我是否有该组织的高级个人资料,如果有,则将用户路由到该方向。 如果没有高级配置文件,则将用户发送到标准配置文件。 我正在使用 ng-click 执行此操作,它将 id 和资源(在本例中为组织)参数发送到控制器,在控制器中评估条件,然后将用户路由到正确的方向。 当用户正常点击时,所有这些都可以正常工作。 但是,当用户尝试在新选项卡中打开链接时,通过右键单击并选择该选项,新选项卡将使用当前页面的 url 打开。 所以 ng-click 和控制器在打开新标签之前没有触发或评估请求。 如何通过代码进行更改,以便 Angular 在打开新选项卡之前处理 ng-click 请求? 或者更广泛地说,我如何允许我的用户在新选项卡中打开这些链接之一,以便他们不只是显示他们当前所在的页面? HTML <div ng-controller="ProfileRouter"> <div ng-repeat="org in orgs | orderBy:'org.name'"> <a href="" ng-click="profileCheck( '{{ org.id }}', 'organisation' )">{{ org.name }}</a> </div> </div> ProfileRouter 控制器内部
  • 你能用 JavaScript 来检测用户是否关闭了浏览器标签页吗? 关闭浏览器? 还是离开了浏览器?(Can you use JavaScript to detect whether a user has closed a browser tab? closed a browser? or has left a browser?)
    问题 把你放在图片中: 用户在移动设备上查看浏览器(即 iPhone 上的 Safari) 他们可以看到密码字段以在模式框中创建密码如果用户要关闭模态框并退出浏览器,我想向他们发送电子邮件以提示他们创建密码。 我最初的想法是必须有某种 java-script 事件才能做到这一点? 那么您能否使用 JavaScript 检测以下用户操作: - 关闭选项卡 - 关闭浏览器 - 离开浏览器 回答1 也在寻找问题,但你不会满足需求。 我刚刚找到了解决这个问题的方法:“你能用 JavaScript 来检测用户是否关闭了浏览器选项卡?关闭了浏览器?还是离开了浏览器?” <html> <head> <title>Detecting browser close</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> var validNavigation = false; function wireUpEvents() { var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you