2015-12-07 55 views
1

下面的javascript可以滑動左/右導航。出於某種原因,我想使用URL來調用此函數,例如<a href="javascript:function">。某些URL將等同於左滑動,而另一個URL則相當於右滑動。這可能嗎?從URL調用Javascript功能

(function(window){ 

var window = window, 
    document = window.document, 
    screen = window.screen, 
    touchSwipeListener = function(options) { 
     // Private members 
     var track = { 
       startX: 0, 
       endX: 0 
      }, 
      defaultOptions = { 
       moveHandler: function(direction) {}, 
       endHandler: function(direction) {}, 
       minLengthRatio: 0.3 
      }, 
      getDirection = function() { 
       return track.endX > track.startX ? "prev" : "next"; 
      }, 
      isDeliberateMove = function() { 
       var minLength = Math.ceil(screen.width * options.minLengthRatio); 
       return Math.abs(track.endX - track.startX) > minLength; 
      }, 
      extendOptions = function() { 
       for (var prop in defaultOptions) { 
        if (defaultOptions.hasOwnProperty(prop)) { 
         options[ prop ] || (options[ prop ] = defaultOptions[ prop ]); 
        } 
       } 
      }, 
      handler = { 
       touchStart: function(event) { 
        // At least one finger has touched the screen 
        if (event.touches.length > 0 ) { 
         track.startX = event.touches[0].pageX; 
        } 
       }, 
       touchMove: function(event) { 
        if (event.touches.length > 0 ) { 
         track.endX = event.touches[0].pageX; 
         options.moveHandler(getDirection(), isDeliberateMove()); 
        } 
       }, 
       touchEnd: function(event) { 
        var touches = event.changedTouches || event.touches; 
        if (touches.length > 0 ) { 
         track.endX = touches[0].pageX; 
         isDeliberateMove() && options.endHandler(getDirection()); 
        } 
       } 
      }; 

     extendOptions(); 
     // Graceful degradation 
     if (!document.addEventListener) { 
      return { 
       on: function() {}, 
       off: function() {} 
      } 
     } 
     return { 
      on: function() { 
       document.addEventListener('touchstart', handler.touchStart, false); 
       document.addEventListener('touchmove', handler.touchMove, false); 
       document.addEventListener('touchend', handler.touchEnd, false); 
      }, 
      off: function() { 
       document.removeEventListener('touchstart', handler.touchStart); 
       document.removeEventListener('touchmove', handler.touchMove); 
       document.removeEventListener('touchend', handler.touchEnd); 
      } 
     } 
    } 
    // Expose global 
    window.touchSwipeListener = touchSwipeListener; 

}(window)); 



(function(window){ 
    var document = window.document, 
     // Element helpers 
     Util = { 
      addClass: function(el, className) { 
       el.className += " " + className; 
      }, 
      hasClass: function(el, className) { 
       var re = new RegExp("\s?" + className, "gi"); 
       return re.test(el.className); 
      }, 
      removeClass: function(el, className) { 
       var re = new RegExp("\s?" + className, "gi"); 
       el.className = el.className.replace(re, ""); 
      } 
     }, 
     swipePageNav = (function() { 
      // Page sibling links like <link rel="prev" title=".." href=".." /> 
      // See also http://diveintohtml5.info/semantics.html 
      var elLink = { 
        prev: null, 
        next: null 
       }, 
       // Arrows, which slide in to indicate the shift direction 
       elArrow = { 
        prev: null, 
        next: null 
       }, 
       swipeListener; 
      return { 
       init: function() { 
        this.retrievePageSiblings(); 
        // Swipe navigation makes sense only if any of sibling page link available 
        if (!elLink.prev && !elLink.next) { 
         return; 
        } 
        this.renderArows(); 
        this.syncUI(); 
       }, 
       syncUI: function() { 
        var that = this; 
        // Assign handlers for swipe "in progress"/"complete" events 
        swipeListener = new window.touchSwipeListener({ 
         moveHandler: function(direction, isDeliberateMove) { 
          if (isDeliberateMove) { 
           if (elArrow[ direction ] && elLink[ direction ]) { 
            Util.hasClass(elArrow[ direction ], "visible") || 
             Util.addClass(elArrow[ direction ], "visible"); 
           } 
          } else { 
           Util.removeClass(elArrow.next, "visible"); 
           Util.removeClass(elArrow.prev, "visible"); 
          } 
         }, 
         endHandler: function(direction) { 
          that[ direction ] && that[ direction ](); 
         } 
        }); 
        swipeListener.on(); 
       }, 
       retrievePageSiblings: function() { 
        elLink.prev = document.querySelector("head > link[rel=prev]"); 
        elLink.next = document.querySelector("head > link[rel=next]"); 
       }, 
       renderArows: function() { 
        var renderArrow = function(direction) { 
         var div = document.createElement("div"); 
         div.className = "spn-direction-sign " + direction; 
         document.getElementsByTagName("body")[ 0 ].appendChild(div); 
         return div; 
        } 
        elArrow.next = renderArrow("next"); 
        elArrow.prev = renderArrow("prev"); 
       }, 
       // When the shift (page swap) is requested, this overlay indicates that 
       // the current page is frozen and a new one is loading 
       showLoadingScreen: function() { 
        var div = document.createElement("div"); 
        div.className = "spn-freezing-overlay"; 
        document.getElementsByTagName("body")[ 0 ].appendChild(div); 
       }, 
       // Request the previous sibling page 
       prev: function() { 
        if (elLink.prev) { 
         this.showLoadingScreen(); 
         window.location.href = elLink.prev.href; 
        } 
       }, 
       // Request the next sibling page 
       next: function() { 
        if (elLink.next) { 
         this.showLoadingScreen(); 
         window.location.href = elLink.next.href; 
        } 
       } 
      } 
     }()) 

    // Apply when document is ready 
    document.addEventListener("DOMContentLoaded", function(){ 
     document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
     try { 
      swipePageNav.init(); 
     } catch (e) { 
      alert(e); 
     } 
    }, false); 


}(window)); 
+0

「*我想調用這個函數使用URL *」 - [只是不這樣做](http://stackoverflow.com/q/245868/1048572)。 – Bergi

回答

0

你不能那樣做。但是,如果是爲了組織目標,爲什麼不能有兩個JavaScript文件,每個文件都有自己的名稱空間。如果你這樣做,你只能調用預期用於點擊鏈接的名稱空間。

+0

我想要這個的原因是我想要在android webview中實現滑動導航像http://stackoverflow.com/questions/15384638/implement-swipe-function-in-webview-and-call-a-javascript-function- via-a-javascr 發佈該問題的用戶具有類似javascript的功能:left() – user2872856

+0

我明白了。這超出了我的知識範圍。我只能提示「javascript:left()」,在左邊的函數裏面做一個ajax並請求代碼。一旦你的代碼執行。相同的權利。 – tryingDelete