Javascript/jQuery: programmatically follow a link

前端 未结 2 905
南方客
南方客 2021-01-03 22:59

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



        
2条回答
  •  轻奢々
    轻奢々 (楼主)
    2021-01-04 00:01

    METHOD 1 click method

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

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

    Method 2 Firing synthetic events

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

    DEMO: 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');
    }
    

提交回复
热议问题