子比主题美化– 前台发布文章离开提示保存功能

在日常的内容创作过程中，不少子比用户习惯于使用前台的编辑器来发布文章。这主要是因为其操作极为便捷，能让创作者更高效地完成内容创作与发布工作。

然而，在实际使用中却时常会出现这样一种令人困扰的情况：当我们全身心投入到文章撰写中时，可能因为某些原因不小心点击了其他页面，随后在不经意间关闭了当前编辑页面。这样一来，之前辛苦创作的心血——未保存的文章，就付诸东流了，这无疑给创作者带来了极大的困扰和损失。

鉴于此，为了提升用户体验，避免这种因疏忽而导致文章丢失的情况发生，我们特别开发了一个贴心的功能——提示保存文章功能。当用户在编辑器中进行文章创作时，若系统检测到可能存在页面被意外关闭的风险，就会及时弹出提示框，友好地提醒用户保存当前正在编辑的文章，从而有效避免因页面意外关闭而造成的数据丢失问题

将下面的代码放到：子比主题–>>自定义底部HTML代码即可！

<!-- 提示编辑保存js开始-->
<script type="text/javascript">
let whiteList = ['/newposts','/posts-edit/']
let flag = whiteList.includes(window.location.pathname)  ? true : false
let formListenerAdded = false;
function listeningForm() {
    var hasChanges = false;
    var oldXHR = window.XMLHttpRequest;
    setTimeout(function() {
    var iframe = document.getElementById('post_content_ifr');
    if (iframe) {
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        // 创建一个observer实例
        var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                hasChanges = true
            
            });
        });
        
        // 配置observer实例连接到具体的DOM元素和配置观察选项
        var config = { attributes: true, childList: true, characterData: true, subtree: true };
        observer.observe(iframeDoc.documentElement, config);
        
        // 当不再需要观察时，可以断开observer
        
        }
    }, 1000);  // 延迟1000毫秒后执行
    // 监听所有表单输入的变化
     Array.from(document.querySelectorAll('input, textarea, select')).forEach(function(element) {
        element.addEventListener('input', function() {
            hasChanges = true;
      
        });
    });

    // 如果使用WordPress的TinyMCE编辑器，也要监听它的变化
    if (typeof tinyMCE !== 'undefined') {
        tinyMCE.editors.forEach(function(editor) {
            editor.on('change', function() {
                hasChanges = true;
            });
        });
    }
    
    function newXHR() {
        var realXHR = new oldXHR();
        realXHR.addEventListener('readystatechange', function() {
            if (realXHR.readyState === 4) { // 请求完成 ' https://www.你的域名.cn/wp-admin/admin-ajax.php'
                if (realXHR.responseURL =='https://www.你的域名.cn/wp-admin/admin-ajax.php') {
                    hasChanges= false
                   
                }
            }
        }, false);

        return realXHR;
    }
    window.XMLHttpRequest = newXHR;
    // 在尝试离开页面时弹出警告
    window.addEventListener('beforeunload', function(event) {
        if (hasChanges) {
            var message = '您有未保存的更改。如果离开此页面，您可能会丢失这些更改。';
            event.returnValue = message;
            return message
        }
        
    });
}
document.addEventListener('DOMContentLoaded', function() {
    if (!formListenerAdded && flag) {
        listeningForm();
        formListenerAdded = true;
    }
});
</script>
<!-- 提示编辑保存js结束-->