<apex: includeScript> Visualforce 页面中的组件

17 Mar 2025 | 阅读 2 分钟

<apex: includeScript> 是 Visualforce 页面中另一个重要的组件，它链接到 JavaScript 库。当我们指定此组件时，<apex: includeScript> 会将脚本引用注入到生成的 HTML 页面的 head 元素中。

我们可以通过对同一脚本进行多次引用来使此组件在迭代组件中保持安全。

此组件支持使用 "html-" 前缀的 HTML 传递属性，该前缀附加到生成的 <script> 标签。

<apex: includeScript> 在 Visualforce 页面上具有以下属性

1. id

id 是一个字符串类型的属性，即一个唯一的标识符，允许页面中的其他组件引用该组件。

语法

2. loadOnReady

loadOnReady 是一个布尔类型的属性，用于指定是否立即加载脚本资源。如果不是，则将在设计文档模型后加载资源。布尔值 false 被设置为此属性的默认值。

语法

3. value

value 是一个对象类型的属性，用于指定 JavaScript 文件的 URL。我们可以指定对静态资源的引用或纯 URL。

语法

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

让我们看一个例子来了解如何在 Visualforce 页面上使用此组件

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>

输出

apex: includeScript Component in Visualforce Page

下一主题</apex: inputTextarea> Visualforce 页面中的组件

<apex: includeScript> Visualforce 页面中的组件

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Visualforce Salesforce

<apex: includeScript> Visualforce 页面中的组件

相关帖子

apex:axis 组件

apex:outputText 组件

apex:dynamicComponent

apex:chartTips 组件

apex:input 组件

apex:outputLink 组件

apex:dataTable 组件

apex:dataList 组件

apex:pageBlock 组件

apex:inputTextArea 组件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器