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.