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>
Copied!

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

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

accesskey

accesskey
Type
string
Keyboard shortcut to access this element

additionalAttributes

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

aria

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

async

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

class

class
Type
string
CSS class(es) for this element

crossorigin

crossorigin
Type
string
Define how to handle crossorigin requests.

data

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

defer

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

dir

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

id

id
Type
string
Unique (in this file) identifier for this HTML element.

identifier

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

integrity

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

lang

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

nomodule

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

nonce

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

onclick

onclick
Type
string
JavaScript evaluated for the onclick event

priority

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

referrerpolicy
Type
string
Define which referrer is sent when fetching the resource.

src

src
Type
string
Define the URI of the external resource.

style

style
Type
string
Individual CSS styles for this element

tabindex

tabindex
Type
integer
Specifies the tab order of this element

title

title
Type
string
Tooltip text of element

type

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

useNonce

useNonce
Type
bool
Default
false
Whether to use the global nonce value