Javascript/jQuery：以编程方式跟随链接

Javascript/jQuery: programmatically follow a link

提问by Dan

In Javascript code, I would like to programmatically cause the browser to follow a link that's on my page. Simple case:

在 Javascript 代码中，我想以编程方式使浏览器跟随我页面上的链接。简单案例：

<a id="foo" href="mailto:[email protected]">something</a>

---

---

function goToBar() {
   $('#foo').trigger('follow');
}

This is hypothetical as it doesn't actually work. And no, triggering clickdoesn't do it.

这是假设的，因为它实际上不起作用。不，触发click不会这样做。

I am aware of window.locationand window.openbut these differ from native link-following in some ways that matter to me: a) in the presence of a <base />element, and b) in the case of mailtoURLs. The latter in particular is significant. In Firefox at least, calling window.location.href = "mailto:[email protected]"causes the window's unloadhandlers to fire, whereas simply clicking a mailtolink does not, as far as I can tell.

我知道的window.location和window.open，但这些来自本地不同链接跟随在某些方面这件事对我说：在存在一个）<base />元素的情况下，和b）mailto的URL。后者尤其重要。至少在 Firefox 中，调用window.location.href = "mailto:[email protected]"会导致窗口的unload处理程序触发，而mailto据我所知，仅单击链接不会触发。

I'm looking for a way to trigger the browser's default handling of links, from Javascript code.

我正在寻找一种从 Javascript 代码触发浏览器默认链接处理的方法。

Does such a mechanism exist? Toolkit-specific answers also welcome (especially for Gecko).

这样的机制存在吗？也欢迎特定于 Toolkit 的答案（尤其是 Gecko）。

回答by Torsten Walter

As far as I know, window.location does exactly what you are looking for, triggering the browser's default link clicking behavior.

据我所知， window.location 完全符合您的要求，触发浏览器的默认链接点击行为。

Some browsers notice the protocol before any events are fired or the actual href is changed.

某些浏览器会在触发任何事件或更改实际 href 之前注意到该协议。

window.location = "mailto:[email protected]";

Trying the fiddle demo mentioned below I get the following results:

尝试下面提到的小提琴演示，我得到以下结果：

• Chromium: fires onbeforeunloadwith the button and link
• Firefox fires onbeforeunloadonly for the button
• Safari: never fires onbeforeunload
• Opera: same as Safari

• Chromium：onbeforeunload通过按钮和链接触发
• Firefoxonbeforeunload只为按钮触发
• Safari：从不开火 onbeforeunload
• Opera：与Safari相同

So a good way to prevent the unloadevent from being fired is by returning false in beforeunload.

因此，防止unload事件被触发的一个好方法是在beforeunload.

回答by Juan Mendes

METHOD 1click method

方法 1单击方法

HTMLElements have a method click()https://developer.mozilla.org/en/DOM/element.click

HTMLElements 有一个方法click()https://developer.mozilla.org/en/DOM/element.click

function goToBar() {
   document.getElementById('foo').click();
}

---

---

Method 2Firing synthetic events

方法 2触发合成事件

I wonder why saluce deleted his answer. That solution is what I've used in the past (when click was an IE only thing). That is, firing a synthetic browser event (not a fake one like jQuery's click()). Let me post a solution using that idea...

我想知道为什么 saluc 删除了他的回答。该解决方案是我过去使用过的（当单击仅用于 IE 时）。也就是说，触发合成浏览器事件（不是像 jQuery 那样的虚假事件click()）。让我使用这个想法发布一个解决方案......

DEMO: http://jsfiddle.net/eyS6x/3/

演示：http: //jsfiddle.net/eyS6x/3/

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
  // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
  var doc;
  if (node.ownerDocument) {
    doc = node.ownerDocument;
  } else if (node.nodeType == 9 /** DOCUMENT_NODE */){
    // the node may be the document itself
    doc = node;
  } else {
    throw new Error("Invalid node passed to fireEvent: " + +node.tagName + "#" + node.id);
  }

  if (node.fireEvent) {
    // IE-style
    var event = doc.createEventObject();
    event.synthetic = true; // allow detection of synthetic events
    node.fireEvent("on" + eventName, event);
  } else if (node.dispatchEvent) {
    // Gecko-style approach is much more difficult.
    var eventClass = "";

    // Different events have different event classes.
    // If this switch statement can't map an eventName to an eventClass,
    // the event firing is going to fail.
    switch (eventName) {
      case "click":
      case "mousedown":
      case "mouseup":
        eventClass = "MouseEvents";
        break;

      case "focus":
      case "change":
      case "blur":
      case "select":
        eventClass = "HTMLEvents";
        break;

      default:
        throw "JSUtil.fireEvent: Couldn't find an event class for event '" + eventName + "'.";
        break;
    }
    var event = doc.createEvent(eventClass);
    var bubbles = eventName == "change" ? false : true;  
    event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable.

    event.synthetic = true; // allow detection of synthetic events
    node.dispatchEvent(event);
  }
};

document.getElementById('button').onclick = function() {
   fireEvent( document.getElementById('link'), 'click');
}