Posted at

Lightningコンポーネント内にscriptタグを記述する方法

More than 3 years have passed since last update.

Lightningアプリケーション内にはscriptタグを記述できますが、Lightningコンポーネント内に記述しようとすると、script tags only allowed in templatesなどと言われて保存できません。

controllerとかに書けば良いのですが、ダメよと言われるとどうしても書きたくなりますよね。そこで、aura:htmlタグを使うと実は書けます。


component.cmp

<aura:html tag="script">alert("Hello");</aura:html>


src属性も使えるので静的リソースのファイルも読めます。


component.cmp

<aura:html tag="script" src="/resource/tiwasakidemo__jqueryjs">

</aura:html>

じゃ、本題の(!)、RequireJS使わなくて良いの、というところについてですが、残念ながらそうはなりません。上記のjQuery読み込みのすぐ後にjQueryオブジェクトを参照しても参照できないことが多々あります。

ソースを追ってみると、どうやらscriptタグの挿入時のみ特殊扱いをしていて、非同期読み込みになってしまうからのようです。


aura_proddebug.js

if(element["tagName"] && element["tagName"] == "SCRIPT") {

aura["util"].style.$getHead$().appendChild(element)
}else {
toInsert.push(element)
}

という訳で、今回は我々(?)の惨敗という結果になりました。createElementした方がましです。またがんばりましょう。

あ、ちなみにaura:unescapedHtmlタグも試したのですがこちらの場合、scriptを表示させることはできないという結果でした。