開発

【ハイブリッドアプリ対応】scriptタグを動的に追加して後からJavaScriptを実行させる方法

更新日:

JavaScript

JavaScriptを実行させるには通常はHTML内にscriptタグを書いておきますが、場合によっては後からJavaScriptを追加したいような状況が発生します。

その際にinnerHTMLでscriptを追加してもただのDOM要素と解釈されてしまい、scriptが実行されないのでcreateElementを使ってappendChild(jQueryの場合はappend)でDOMに追加します。

この方法はscriptの属性がtypeやsrcのように用意されているものなら問題ありませんが、カスタム属性が存在する場合には使えません。

JavaScriptを実行するとiframeが生成されてWidgetが表示されるJavaScriptなどは、独自の属性を用意していることがあります。

WEBベースのハイブリッドアプリに使う場合でもこの書き方でJavaScriptを実行できました。
※Ionic v1にてdirectiveやcomponentを使ってDOMに追加することでJavaScriptの実行を確認

カスタム属性を含む場合は下記のように設定します。「data-」部分が独自に用意された属性となります。

ハイブリッドアプリでの使用を考えずにHTMLのみであれば、下記のようにタグに近い書き方もでも動作します。ただし「/」の前には「\」を入れてエスケープしないと正しく動きません。

ハイブリッドアプリで動的にiframeが生成されるスクリプトを実行した場合の注意点

-開発
-

Copyright© Workerブログ|仕事を続けるための工夫 , 2020 All Rights Reserved Powered by STINGER.