How to Verify if the Page is in Edit Mode using JavaScript in SharePoint 2013

Introduction

In one of my projects, there was a need to have a specific edit mode functionality to be implemented, so there might be lot of approaches we can have but I found some of the below approaches that we can implement to verify if the page is in edit mode using JavaScript.

For Publishing Page

SharePoint default input called MSOLayout_InDesignMode is there. If the value is 1, then page is in edit mode else it is in display mode.

var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (inDesignMode == "1")
{
   // page is in edit mode
}
else
{
   // page is in browse mode
}

This will refer to the value of the following HTML input control, which is rendering on the page when it is in edit mode:

<input id="MSOLayout_InDesignMode" name="MSOLayout_InDesignMode" 
type="hidden" value="1" />

For Wiki Pages

Same as above another default input _wikiPageMode parameter will be used. If the value is Edit page is in edit mode else in display mode.

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

Custom Code Snippets

Also, you can place some snippet control to master page or page layout if you have customized it and place the following snippets:

<PublishingWebControls:EditModePanel ID="EditModelPanel1" 
runat="server" PageDisplayMode="Edit">
    <h1>You are in EDIT mode</h1>
    <!-- Place you're javascript for execute only in edit mode -->
</PublishingWebControls:EditModePanel>

<PublishingWebControls:EditModePanel ID="EditModelPanel2" 
runat="server" PageDisplayMode="Display">
    <h1>You are in DISPLAY mode</h1>
    <!-- Place you're javascript for execute only in display mode -->
</PublishingWebControls:EditModePanel>

Cheers!CodeProject