const mixinafDuvet::HtmlInjector


(Service) - Injects HTML elements into your page. Elements are queued up and injected just before the page is sent to the browser.

Elements are listed in the HTML in the order they are added. Duplicate elements are ignored. So if a component adds a stylesheet link, that component may be used many times on a page but, only ONE link to that stylesheet will be rendered.

Injecting scripts and stylesheets will also update an Content-Security-Policy directives to ensure the added content can be executed.



abstract ScriptTagBuilder injectFantomMethod(Method method, Obj?[]? args := null, [Str:Str]? env := null)

Injects a call to a Fantom method. That's right, this method lets you run Fantom code in your web browser! Because Fantom only compiles classes with the @Js facet into Javascript, ensure the method's class has it!

All method arguments must be @Serializable as they are serialised into Strings and embedded directly into Javascript.

env are environment variables passed into the Fantom Javascript runtime.

Note that when instantiating an FWT window, by default it takes up the whole browser window. To constrain the FWT window to a particular element on the page, pass in the follow environment variable:

"fwt.window.root" : "<element-id>"

Where <element-id> is the html ID of an element on the page. The FWT window will attach itself to this element.

htmlInjector.injectFantomMethod(FwtExample#info, null, ["fwt.window.root" : "<element-id>"])

Note that the element needs to specify a width, height and give a CSS position of relative. This may either be done in CSS or defined on the element directly:

<div id="fwt-window" style="width: 640px; height:480px; position:relative;"></div>    


abstract LinkTagBuilder injectLink()

Injects a <link> element into the bottom of your head. Example:


will render the following tag:

<link href="/css/styles.css">


abstract MetaTagBuilder injectMeta()

Injects a <meta> element into the bottom of your head. Example:


will render the following tag:

<meta name="viewport" content="initial-scale=1">


abstract Void injectRequireJs()

Ensures that the RequireJS script and corresponding config is injected into the page.

A call to this is only required when you want to hard code require calls in the HTML. For example, if your HTML looked like this:

        require(['jquery'], function($) {
            // ... wotever...

Then a call to injectRequireJs() would be required to ensure RequireJS was loaded before the script call.



abstract ScriptTagBuilder injectRequireModule(Str moduleId, Str? funcName := null, Obj?[]? funcArgs := null)

Injects a call to a RequireJS module.

If the RequireJS module exposes an object then a function may be invoked using funcName and funcArgs. Example:

injectRequireModule("my/shirt", "addToCart", ["shirt", 1.99f])

will generate:

<script type="text/javascript">
  require(["my/shirt"], function (module) { module.addToCart("shirt", 1.99); });

Or, if the RequireJS module returns a function as its module definition then it may be invoked directly by passing null as the funcName. Example:

injectRequireCall("my/title", null, ["Reduced to Clear!"])

will generate:

<script type="text/javascript">
  require(["my/title"], function (module) { module("Reduced to Clear!"); });

Note that funcArgs are converted into JSON; which is really useful, as it means you don't have to!



abstract ScriptTagBuilder injectRequireScript(Str:Str functionParams, Str script)

Wraps the script in a function call to RequireJS, ensuring the given module dependencies are available.

functionParams is a map of RequireJs module names to function parameter names. Example:

injectRequireScript(["jquery":"\$"], "\$('p').addClass('magic');")

will generate:

<script type="text/javascript">
  require(["jquery"], function ($) {


abstract ScriptTagBuilder injectScript(Bool appendToHead := false)

Injects a <script> element into the bottom of your body. Example:


will render the following tag:

<script type="text/javascript" src="//"></script>

Consider using RequireJS AMD modules instead!

Note that by default the script is injected at the bottom of the <body> tag.



abstract LinkTagBuilder injectStylesheet()

Injects a <link> element, defaulted for CSS stylesheets, into the bottom of your head. Example:


will render the following tag:

<link type="text/css" rel="stylesheet" href="/css/styles.css">