Asset.script ViewHelper `<f:asset.script>`¶

ViewHelper to add JavaScript to the TYPO3 AssetCollector. Either a file or inline JavaScript can be added.

Examples¶

<f:asset.script identifier="identifier123" src="EXT:my_ext/Resources/Public/JavaScript/foo.js" />
<f:asset.script identifier="identifier123">
   alert('hello world');
</f:asset.script>

Details¶

In the AssetCollector, the "identifier" attribute is used as a unique identifier. Thus, if assets are added multiple times using the same identifier, the asset will only be served once (the last added overrides previous assets).

Some available attributes are defaults but do not make sense for this ViewHelper. Relevant attributes specific for this ViewHelper are: async, crossorigin, defer, integrity, nomodule, nonce, referrerpolicy, src, type.

Source code

Go to the source code of this ViewHelper: Asset\ScriptViewHelper.php (GitHub).

Arguments

Allows arbitrary arguments

This ViewHelper allows you to pass arbitrary arguments not defined below directly to the HTML tag created. This includes custom data- arguments.

The following arguments are available for the asset.script ViewHelper:

accesskey ¶

Type: string

Keyboard shortcut to access this element

additionalAttributes ¶

Type: array

Additional tag attributes. They will be added directly to the resulting HTML tag.

aria ¶

Type: array

Additional aria-* attributes. They will each be added with a "aria-" prefix.

async ¶

Type: bool

Define that the script will be fetched in parallel to parsing and evaluation.

class ¶

Type: string

CSS class(es) for this element

crossorigin ¶

Type: string

Define how to handle crossorigin requests.

data ¶

Type: array

Additional data-* attributes. They will each be added with a "data-" prefix.

defer ¶

Type: bool

Define that the script is meant to be executed after the document has been parsed.

dir ¶

Type: string

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id ¶

Type: string

Unique (in this file) identifier for this HTML element.

identifier ¶

Type: string
Required: 1

Use this identifier within templates to only inject your JS once, even though it is added multiple times.

integrity ¶

Type: string

Define base64-encoded cryptographic hash of the resource that allows browsers to verify what they fetch.

lang ¶

Type: string

Language for this element. Use short names specified in RFC 1766

nomodule ¶

Type: bool

Define that the script should not be executed in browsers that support ES2015 modules.

nonce ¶

Type: string

Define a cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy.

onclick ¶

Type: string

JavaScript evaluated for the onclick event

priority ¶

Type: boolean
Default: false

Define whether the JavaScript should be put in the <head> tag above-the-fold or somewhere in the body part.

referrerpolicy ¶

Type: string

Define which referrer is sent when fetching the resource.

src ¶

Type: string

Define the URI of the external resource.

style ¶

Type: string

Individual CSS styles for this element

tabindex ¶

Type: integer

Specifies the tab order of this element

title ¶

Type: string

Tooltip text of element

type ¶

Type: string

Define the MIME type (usually 'text/javascript').

useNonce ¶

Type: bool
Default: false

Whether to use the global nonce value

Asset.script ViewHelper <f:asset.script>¶