형식 등 저장되지 않은 내용을 포함할 때 페이지를 떠날 때 다음과 같은 경보를 보냅니다.
터보링크스를 유효하게 설정하고form_for 제작에 대응하는 일반적인 형식과 WYSIWYG 편집기ckeditor를 사용하는 상황을 시험해 본다.
jQuery제AreYouSure일 수 있지만 세밀하게 조정하고 싶어 스스로 했다.
dirtyForms

환경 확인

Rails 5.1.4

Turbolinks 5

WYSIWYG로 사용

일반 DirtyCheck

이벤트에서 검사beforeunload만 하면 폼을 제출하는 시점에서도Dirty로 간주되기 때문에 window.appName.formDirty가 제출인지 확인 중입니다.
app/assets/dirty-forms.js

$(window)
    // フォームの状態を初期化
    .on('turbolinks:load', function () {
        if (!window.appName) window.appName = {};
        window.appName.formDirty = false;
        window.appName.formSubmit = false;
        window.appName.dirtyMessage = '保存していない内容が失われますが、よろしいですか';

        $(':input').change(function () {
            if (!window.appName.formDirty) window.appName.formDirty = true;
        });
        $('form').submit(function () {
            window.appName.formSubmit = true;
        });
    })
    // Turbolinksでページが切り替わるタイミング
    .on("page:before-change turbolinks:before-visit", function () {
        if (window.appName.formDirty) {
            return confirm(window.appName.dirtyMessage);
        }
    })
    // リロードされたり，タブやウインドウが閉じられる前のタイミング
    .bind("beforeunload", function (event) {
        if (!window.appName.formSubmit && window.appName.formDirty) {
            event.returnValue = window.appName.dirtyMessage;
            return event.returnValue;
        }
    });

CKeditor의 Dirty 검사

모든 CKEDITOR의 Dirty를 검사하는 사용자 지정 방법window.appName.formSubmit을 구현합니다.
CKEDITOR.instances ckeditor 방법이 있는데, 그 중 하나만Dirty입니다.
app/assets/ckeditor/index.js

//= require ckeditor/init.js.erb
//= require ./config
//`app/assets/ckeditor/config.js` では `CKEDITOR.editorConfig` を設定したり 
// `dialogDefinition` イベントを設定しているが内容は割愛．

// .ckeditorが付いている要素をWYSIWYG化する
$(document).on('turbolinks:load', function () {
    $('.ckeditor').each(function () {
        CKEDITOR.replace($(this).attr('id'))
    });
});

// すべてのCKEDITORのDirtyをチェックするカスタムメソッドを実装
CKEDITOR.hasDirtyForm = function () {
    var editors = this.instances;
    return Object.keys(editors).some(function (key) {
        return editors[key].checkDirty();
    });
};

사건hasDirtyForm과 page:before-change turbolinks:before-visit에서 검사beforeunload.
app/assets/dirty-forms.js

$(window)
    •••
    .on("page:before-change turbolinks:before-visit", function () {
        if (window.appName.formDirty || CKEDITOR.hasDirtyForm()) {
            return confirm(window.appName.dirtyMessage);
        }
    })
    .bind("beforeunload", function (event) {
        if (!window.appName.formSubmit && (window.appName.formDirty || CKEDITOR.hasDirtyForm()) {
            event.returnValue = window.appName.dirtyMessage;
            return event.returnValue;
        }
    });