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, what do it? We cannot add the code in page layout file directly, the Syetem would filter it and the code lost function. Follow my steps to resolve it.

1. Open the page layout file, it is HTML file2. You must add the JavaScript and CSS under the label <!--ms:<asp:contentplaceholder id= "Placeholderadditionalpagehea D "runat=" Server "&GT;--&GT;. 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 would be a 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 would 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>

How to add Javascript and CSS in page layout with SharePoint 2013