<apex: includeScript> Component in Visualforce Page

The <apex: includeScript> is another important component in the Visualforce page that links to a JavaScript library. When we specify this component, a script reference into the generated HTML page's head element is injected by the <apex: includeScript>.

We can make this component safe inside an iteration component by de-duplicated multiple references to the same script.

The HTML pass-through attributes are supported by this component using the "html-" prefix, which is attached to the generated <script> tag.

The <apex: includeScript> has the following attributes on the Visualforce page:

1. id

The id is a string-type attribute, i.e., a unique identifier that allows other components in the page to reference the component.

Syntax:

2. loadOnReady

The loadOnReady is a boolean-type attribute used for specifying whether the script resource is loaded immediately or not. If not, the resource will be loaded after the document model is designed. The boolean value false is set as the default value for this attribute.

Syntax:

3. value

The value is an object-type attribute used to specify the URL to the JavaScript file. We can specify a reference to a static resource or a plain URL.

Syntax:

<apex: includeScript id="scriptId" value="{!$Resource.example_js}" ></apex: includeScript>

Let's take an example to understand how we can use this component on the Visualforce page:

ApexIncludeScriptExample.vfp

<!-- apex page to use includeScript component--> 
<apex:page standardStylesheets="false" doctype="html-5.0">
    <!--use includeScript to load jQuery in the VF page-->
    <apex: includeScript loadOnReady="false" value="{!$Resource.jQueryScript}" />
    
    <!-- add slds-->
    <apex:slds />
    
    <!-- user html head and body-->
    <head lang="en">
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <!-- use HTML style tag to override standard style-->
        <style>
            #div1{
            	border:2px solid black;
                height: 10rem;
    			width: 50%;
            }
            #div2{
            	border:2px solid black;
                height: 10rem;
    			width: 50%;
            }
            .red{
            	background-color:red;
            	color:white;
            }
            .green{
            	background-color:green;
            	color:white;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            Click anywhere in this div
        </div>
        <br/><br/>
        <div id="div2">
            Place mouse over this div
        </div>
        <br/><br/>
        <!-- use apex form to create inputText--> 
        <apex: form >
            <apex:inputText id="inputId" html-placeholder="Click here" styleClass="slds-input" style="width:50%;"/>
        </apex: form>
        
        <!-- use the script tag to perform the task using jQuery-->
        <script>
            $(document).ready(function(){
                alert('Hello, jQuery is ready to use.');
                
                $('#div1').click(function(){
                    $(this).toggleClass('red');
                });
                $('#div2').hover(function(){
                    $(this).toggleClass('green');
                });
                $('[id$=inputId]').click(function(){
                    alert('InputText is clicked by you.');
                    
                });
            });
        </script>
    </body>
</apex: page>

Output