Question

如果用户在页面上的输入字段中输入了数量以添加产品，但我想显示警告，而不是将其添加到购物车点击其他一些操作。在那种情况下，我希望用户确认他的行动。但是从onbeforeunload的处理函数返回一个字符串对于Ubuntu上的chrome（版本53.0.2785.89（64位））和firefox（版本48）所显示的警报没有影响。

代码如下：

<script>

    (function($){

        var confirmOnPageExit = function (e){
            // If we haven't been passed the event get the window.event
            e = e || window.event;

            var message = 'Are you sure you don\'t want to add these item(s) to cart?';

            // For IE6-8 and Firefox prior to version 4
            if (e) 
            {
                e.returnValue = message;
            }

            // For Chrome, Safari, IE8+ and Opera 12+
            return message;
        };

        function isAnyInputHasValue(){

            var hasSomeQty = false;    
            var qtyInputs = $('input.qty');            

            if(qtyInputs.length > 0){
                qtyInputs.each(function(){
                    if($(this).val().length > 0){
                        hasSomeQty = true;
                        return false;
                    }
                });
            } 

            return hasSomeQty;   
        }


        $(document).ready(function(){

            var shouldConfirm = isAnyInputHasValue(); 
            if(shouldConfirm){
                window.onbeforeunload = confirmOnPageExit;
                //$(window).on('beforeunload', confirmOnPageExit);
            }else{
                window.onbeforeunload = '';
            }

            console.log('on page load ', shouldConfirm);    

        });



        $(document).on('change', 'input.qty', function(){

            var shouldConfirm = false;

            if($(this).val().length > 0){
                shouldConfirm = true;
            }else{
                shouldConfirm = isAnyInputHasValue();
            }

            if(shouldConfirm){
                window.onbeforeunload = confirmOnPageExit;
            }else{
                window.onbeforeunload = '';
            }

            console.log('on qty change ', shouldConfirm);

        });

    })(jQuery);
</script>

相同的代码似乎适用于之前在stackoverflow上提出相同问题的其他人。还试图使用jQuery .on方法订阅onbeforeunload事件但没有成功。

我准备了一个小提琴来证明这个问题：

https://jsfiddle.net/zc08faoy/1/

无法在beforeunload事件上显示我自己的消息

0 个答案: