how to add Javascript and CSS in page layout with sharepoint 2013

how to add Javascript and CSS in page layout with sharepoint 2013

Sometimes, we need create a custom page layout, at the time, if we want to add some javascript and css code, how to do it? we cannot add the code in page layout file directly, the syetem will  filter it and the code lost function. follow my steps to resolve it.

1. Open the page layout file, it is html file

2. you must add the javascript and css under the label  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->. find the label

  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->

   <!--ME:</asp:ContentPlaceHolder>-->

3. You need handle your css label when add css label, or the css will be filter, the correct css label is :

 <!-- MS:<style type="text/css" >-->
 

// add your css code

<!--ME: </style>-->

4. Add javascript code, but you need focus on the document.ready, the document.ready will lost function for page layout is heriting from master page, so the body loading is difference. you must use the function named "_spBodyOnLoadFunctionNames.push"

 <script>

  _spBodyOnLoadFunctionNames.push("cutomFunction");
function cutomFunction(){
// ...
}


</script>

Besides, we need hdie the master page in dialog,you have to add extra class in matser: <div class="s4-notdlg">this section won't </div>。

and you can add new app in custom master page, you need to add the follow control in s4-workspace:

<div style="display:none;">
                        <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" runat="server">-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">-->
                        <!--SPM:</asp:ContentPlaceHolder>-->
                        <!--SPM:</SharePoint:AjaxDelta>-->
                        <!--SPM:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
                        <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
                        <!--SPM:</asp:ContentPlaceHolder>-->
                        <!--SPM:</SharePoint:AjaxDelta>-->
                    </div>