Lightning コンポーネント開発者ガイド
jlightning:container
lightning:container コンポーネントでは、Lightning コンポーネント内でサードパーティのフレームワークを使用して開発されたコンテンツをホストできます。このコンテンツは静的リソースとしてアップロードされ、iFrame でホストされます。lightning:container コンポーネントは、単一ページアプリケーションにのみ使用できます。
次に、myReactApp という名前の静的リソースとしてアップロードされたアプリケーションを読み込む簡単な lightning:container の例を示します。
1<aura:component access="global" implements="flexipage:availableForAllPageTypes">
2 <lightning:container src="{!$Resource.myReactApp + '/index.html'}"/>
3</aura:component>URL を介して属性の値をコンテナに渡すには、コンポーネント内で属性を定義し、src 属性を使用して渡します。
1<aura:component>
2 <aura:attribute access="global" name="greeting" type="String" required="true" default="Hello"/>
3 <div>
4 <lightning:container src="{!$Resource.myReactApp + '/index.html?greeting=' + v.greeting}"/>
5 </div>
6</aura:component>また、フレーム化されたアプリケーションとの通信を実装でき、Salesforce とのやりとりが可能になります。JavaScript コントローラで message() 関数を使用して、アプリケーションにメッセージを送信し、コンポーネントの onmessage 属性でメッセージを処理するメソッドを指定します。
この例では、コンテナから Lightning コンポーネントに送信するメッセージの属性および受信したメッセージの属性を定義します。
1<aura:component access="global" implements="flexipage:availableForAllPageTypes" >
2 <aura:attribute name="messageToSend" type="String" default=""/>
3 <aura:attribute name="messageReceived" type="String" default=""/>
4 <div>
5 <lightning:input name="messageToSend" value="{!v.messageToSend}" label="Message to send to Angular app: "/>
6 <lightning:button label="Send" onclick="{!c.sendMessage}"/>
7 <lightning:textarea name="messageReceived" value="{!v.messageReceived}" label="Message received from Angular app: "/>
8 <lightning:container aura:id="AngularApp"
9 src="{!$Resource.SendReceiveMessages + '/index.html'}"
10 onmessage="{!c.handleMessage}"/>
11 </div>
12</aura:component>クライアント側コントローラは、message() 関数を使用して、簡単な JSON ペイロードを AngularJS アプリケーションに送信します。
1({
2 sendMessage : function(component, event, helper) {
3 var msg = {
4 name: "General",
5 value: component.get("v.messageToSend")
6 };
7 component.find("AngularApp").message(msg);
8 },
9 handleMessage: function(component, message, helper) {
10 var payload = message.payload;
11 var name = payload.name;
12 if (name === "General") {
13 var value = payload.value;
14 component.set("v.messageReceived", value);
15 }
16 else if (name === "Foo") {
17 // A different response
18 }
19 },
20})コントローラ側のメッセージ処理は自身で定義するため、この処理を使用してあらゆる種類のメッセージペイロードを処理できます。たとえば、単にテキスト文字列を送信することや、構造化された JSON 応答を返すことができます。
使用上の考慮事項コンテナの src を指定するときに、ホスト名を指定しないでください。代わりに、$Resource をドット表記で使用して、静的リソースとしてアップロードされたアプリケーションを参照します。
詳細は、『Lightning コンポーネント開発者ガイド』を参照してください。
アクセシビリティalternativeText 属性を使用して、Lightning コンテナの補助テキストを指定します。
メソッドこのコンポーネントは、次のメソッドをサポートします。
message(): ユーザ定義のメッセージをコンポーネントから iFrame コンテンツに送信します。
属性
| 属性名 | 属性型 | 説明 | 必須項目? |
|---|---|---|---|
| alternativeText | String | アクセシビリティのシナリオで代替テキストに使用します。 | |
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| class | String | iframe 要素の CSS クラス。 | |
| onerror | Action | 含まれているアプリケーションへのメッセージ送信時にエラーが発生した場合に実行するクライアント側コントローラのアクション。 | |
| onmessage | Action | 含まれているアプリケーションからメッセージを受信した場合に実行するクライアント側コントローラのアクション。 | |
| src | String | URL 形式のリソース名、ランディングページ、およびクエリパラメータ。ナビゲーションは、特定された単一のページでのみサポートされます。 | はい |