Get Page Field Values with javascript

Unfortunately I don't believe that it can be loaded without a round trip to the server via JSOM or REST. One option I've used in the past is using a function on page load to populate an object by add this to the page.

var PageObject = function(){
  var ctx = new SP.ClientContext.get_current(),
      page = ctx.get_web().get_lists().getById(_spPageContextInfo.pageListId).getItemById(_spPageContextInfo.pageItemId);
  ctx.load(page);
  ctx.executeQueryAsync(
    function(){
      _spPageContextInfo.pageObject = page;
    },
    function(sender, args){
      console.error(args.get_message);
    }
  );
}
_spBodyOnLoadFunctionNames.push(PageObject);

The items can then be accessed via JavaScript by _spPageContextInfo.pageObject.get_item('<Field Name>')

This would be long answer :) but I have given you code also to try it our from your side.

First please note, Pages is like any other document library. You can go to Pages Library settings to view all the fields available for particular page library.

Q. Also is there a list of what Page Fields exist by default? I can't find any documentation on them.

Go to Pages Library -> Go to Library settings, you would be on below page with your parameters List=".........."

https://contoso.sharepoint.com/sites/mysitecollection/_layouts/15/listedit.aspx?List=%7Bdfefaf2f-00f1-1232-2232-69078b786c15%7D

scroll little down you will see fields of page library.

Q. Get Internal Name of Field from UI

Click on any column displayed in above screenshot, you would be redirected to below url

https://contoso.sharepoint.com/sites/mysitecollection/_layouts/15/FldEdit.aspx?List%7Bdfefaf2f-00f1-1232-2232-69078b786c15%7D&Field=ArticleStartDate

If you look closely &Field=ArticleStartDate is at end of URL. This is your internal name of Field Article Start Date

Q. How to get Pages Library Fields from Javascript

Here we can do using JSOM or REST API, I will show example with REST API.

What I did is created txt file which you can refer in content editor webpart to test the demo. copy below code in txt file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script>
function getfields(){

var url = "/_api/Web/Lists/GetByTitle('Pages')/Fields?&$select=StaticName,Title,TypeAsString,Hidden";
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + url,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {

            console.log("");
         $('#fieldList').DataTable( {
        aaData: data.d.results,
        "aoColumns": [  
            {    
                "mData": "StaticName"    
            },   
            {    
                "mData": "Title"    
            },   
            {    
                "mData": "TypeAsString"    
            },   
            {    
                "mData": "Hidden"    
            }
            ]  
    } );
    $('#fieldList').show();
            return false;
        },
        error: function (error) {
            alert(JSON.stringify(error));
            return false;
        }
    });

}

function getvalues(){

var url = "/_api/Web/Lists/GetByTitle('Pages')/Items(@v0)/FieldValuesAsText?@v0=" + 1;
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + url,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {


            var textedJson = JSON.stringify(data.d, undefined, 4);
            $('#myTextarea').show();
            $('#myTextarea').text(textedJson);
            return false;
        },
        error: function (error) {
            alert(JSON.stringify(error));
            return false;
        }
    });

}
</script>



Using this button to get Available Page Fields<button onclick="javascript:getfields();return false;"> Get Pages Library Available Fields </button>

</br>
Enter Page Item ID To Retrieve Field Values of Page : <input id="PageItemID" >
<button onclick="javascript:getvalues();return false"> Get Page Field Values</button>

<textarea style="display:none;width: 100%;min-height: 30rem;font-size: 0.8rem;line-height: 1.2; name="" id="myTextarea" cols="30" rows="10"></textarea>

<table id="fieldList" style="width:100%;display:none">
   <thead>    
            <tr>    
                <th>StaticName</th>    
                <th>Title</th>    
                <th>TypeAsString</th>    
                <th>Hidden</th>    
            </tr>    
        </thead>    
</table>

Add a content editor webpart of any page and add reference to above save txt file.

On page load you would get below screen

click on 'Get Pages Library Available Fields', you will get all the available fields, please note that this will give you all fields, OOTB, hidden, custom fields for all content types, it will give you display name, internalname(StaticName), Field Type, and Hidden, whether it is hidden or not.

Now to retrieve field values of particular page, Enter Page Id(item id of Page), and click on 'Get Page Field Values'. It will show you json object in text area with field name and its value.

Hope this helps..Happy coding..!!!