其他分享
首页 > 其他分享> > Web 浏览器:当有修改的数据时确认离开页面。

Web 浏览器:当有修改的数据时确认离开页面。

作者:互联网

Facebook等网站在有未保存的数据时实现离开当前页面的确认。这并不难做到,但我确实需要一些实验来找出有效的方法。我在这篇文章中讨论我的发现。

我正在使用Jinja 模板引擎来生成 HTML 页面。对于客户端,我正在使用JQuery。我提到使用Jinja 模板引擎是为了动摇完整性,无论用于生成动态 HTML 的方法是什么都无关紧要,因为我们正在讨论的纯粹是客户端的。

要实现此离开页面确认,我们需要处理Window: beforeunload 事件。我想为整个网站的所有页面执行此操作,因此我在基本模板中实现它:

File base_template.html
<!doctype html>
<html lang="en" class="h-100">
<head>
    ...
    <script src="http://localhost/work/jquery/js/jquery-3.6.0.min.js"></script>
    ...

    <script>
        // Individual pages must set and reset this during their operations.    
        let dataChanged = false;

        const setDataChanged = () => dataChanged = true;
        const resetDataChanged = () => dataChanged = false;

        $( document ).ready( function(event) {

            $( window ).on( 'beforeunload', function( event ) {
                if ( dataChanged ) 
                    // return confirm( 'There are unsaved data. Please confirm.' );
                    // return false;
                    // return true;
                    return null;
            });

        });
    </script>
</head>

<body class="d-flex flex-column h-100">
    {% block content %}
    <!-- Content of specific individual pages go here. -->
    {% endblock %}
</body>
</html>

唯一的事情“金贾”关于这个页面是以下块:

    {% block content %}
    <!-- Content of specific individual pages go here. -->
    {% endblock %}

基本上,在运行时,处理引擎将此块替换为请求的页面,以制作完整且有效的HTML页面以返回到请求客户端。

beforeunload事件的代码很简单:如果变量dataChangedtrue,则返回null,否则什么都不做。

我注释掉了三 (3) 返回语句:它们与返回 null 具有相同的效果。

页面负责分别通过调用setDataChanged()resetDataChanged()来设置和重置dataChanged。请注意,当页面首次加载时,dataChanged被初始化为false

进入base_template.html块内容的单个页面的一般结构:

File a_specific_page.html
{% extends "page_template.html" %}

{% block content %}
<script>
    function bindDataChange() {
        $( '.selector-input, input[type="checkbox"]' ).on( 'change', function(event) {
            ...
            setDataChanged();

            event.preventDefault();
        });
    };

    function bindSave() {
        function savedSuccessful( data ) {
            resetDataChanged();
            ...
        };

        $( '#saveBtn' ).on( 'click', function( even ) {

            if ( !$('#somethingFrm').parsley().validate() ) return false;

            // Send data to server using AJAX. Response is JSON status.
            saveData( '/save-something/', '{{ csrf_token() }}',
                $( '#somethingFrm' ).serialize(), savedSuccessful );

            event.preventDefault();
        });
    };

    $( document ).ready( function() {
        ...
        bindDataChange();
        bindSave();
        ...
    });
</script>

<div class="d-flex row justify-content-center h-100">
    ...
</div>
{% endblock %}

注意setDataChanged() 和 resetDataChanged() 被调用的位置。还请记住,当页面首次加载时,dataChanged被初始化为false

a_specific_page.html通过AJAX调用保存数据,响应是JSON状态,指示请求的结果:在此操作期间不会重新加载页面。

简而言之,每当用户在屏幕上执行任何需要持久化数据的操作时,都必须调用setDataChanged()。成功保存数据后,必须调用重置数据更改()。

标签:Facebook,数据,浏览器,引擎,代码,客户端
来源: