JavaScript: detect if a SharePoint page is in edit mode

Client side scripts sometimes need to know whether a SharePoint page is being edited. The right check depends on the page type.

Publishing pages

Query the g_disableCheckoutInEditMode variable:

if (g_disableCheckoutInEditMode == true) {
    alert('Page is in edit mode');
}
else {
    alert('Page is in display mode');
}

Another option is to add an EditModePanel to the master page. Its content only renders in edit mode, so it can flip a flag:

html

<script type="text/javascript">
    var IsEditMode = false;
</script>

<PublishingWebControls:EditModePanel runat="server" id="EditModePanelToFindEditMode">
    <script type="text/javascript">
        IsEditMode = true;
    </script>
</PublishingWebControls:EditModePanel>

Your scripts can then read the IsEditMode variable.

The PageState object also has a ViewModeIsEdit property. The catch is that the object is only initialised after sp.ribbon.js has loaded, so it is not available early in the page.

Web part pages

Read the layout mode from the page form:

var IsEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (IsEditMode == "1") {
    // page is in edit mode
}
else {
    // page is in browse mode
}

Wiki pages

Wiki pages use a different field:

var IsEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
if (IsEditMode == "Edit") {
    // wiki page is in edit mode
}
else {
    // wiki page is not in edit mode
}