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.

Arguments

additionalAttributes

DataType

mixed

Required

false

Description

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

data

DataType

mixed

Required

false

Description

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

aria

DataType

mixed

Required

false

Description

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

class

DataType

string

Required

false

Description

CSS class(es) for this element

dir

DataType

string

Required

false

Description

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

id

DataType

string

Required

false

Description

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

lang

DataType

string

Required

false

Description

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

style

DataType

string

Required

false

Description

Individual CSS styles for this element

title

DataType

string

Required

false

Description

Tooltip text of element

accesskey

DataType

string

Required

false

Description

Keyboard shortcut to access this element

tabindex

DataType

integer

Required

false

Description

Specifies the tab order of this element

onclick

DataType

string

Required

false

Description

JavaScript evaluated for the onclick event

async

DataType

mixed

Required

false

Description

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

crossorigin

DataType

string

Required

false

Description

Define how to handle crossorigin requests.

defer

DataType

mixed

Required

false

Description

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

integrity

DataType

string

Required

false

Description

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

nomodule

DataType

mixed

Required

false

Description

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

nonce

DataType

string

Required

false

Description

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

referrerpolicy

DataType

string

Required

false

Description

Define which referrer is sent when fetching the resource.

src

DataType

string

Required

false

Description

Define the URI of the external resource.

type

DataType

string

Required

false

Description

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

useNonce

DataType

mixed

Required

false

Description

Whether to use the global nonce value

identifier

DataType

string

Required

true

Description

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

priority

DataType

boolean

Required

false

Description

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