繁体   English   中英

从URL调用Javascript函数

[英]Call Javascript Function from URL

下面的javascript可以向左/向右滑动导航。 由于某些原因,我想使用诸如<a href="javascript:function"> URL调用此函数。 某些网址等同于向左滑动,而另一网址等同于向右滑动。 这可能吗?

(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 ));

你不能这样做。 但是,如果是出于组织目标,那么为什么不使用两个JavaScript文件,每个文件都有自己的命名空间。 如果执行此操作,则仅调用单击的链接所需的名称空间。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM