この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

lightning:container

AngularJS や React など、サードパーティの JavasScript フレームワークを使用するコンテンツを含めるために使用します。

lightning:container コンポーネントでは、Lightning コンポーネント内でサードパーティのフレームワークを使用して開発されたコンテンツをホストできます。このコンテンツは静的リソースとしてアップロードされ、iFrame でホストされます。lightning:container コンポーネントは、単一ページアプリケーションにのみ使用できます。

以下は、lightning:container の簡単な例です。

1<aura:component access="global" implements="flexipage:availableForAllPageTypes">
2    <lightning:container src="{!$Resource.myReactApp + '/index.html'}"/>
3</aura:component>

また、フレーム化されたアプリケーションとの通信を実装でき、Salesforce とのやりとりが可能になります。JavaScript コントローラで message() 関数を使用して、アプリケーションにメッセージを送信し、コンポーネントの onmessage 属性でメッセージを処理するメソッドを指定します。

次の JavaScript コントローラの例は、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})

付随するコンポーネント定義は、コンテナから Lightning コンポーネントに送信するメッセージの属性および受信したメッセージの属性を定義します。lightning:container の onmessage 属性は、JavasSript メソッド handleMessage を参照します。

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>

コントローラ側のメッセージ処理は自身で定義するため、この処理を使用してあらゆる種類のメッセージペイロードを処理できます。たとえば、単にテキスト文字列を送信することや、構造化された JSON 応答を返すことができます。

使用上の考慮事項

コンテナの src を指定するときに、ホスト名を指定しないでください。代わりに、$Resource をドット表記で使用して、静的リソースとしてアップロードされたアプリケーションを参照します。

アクセシビリティ

alternativeText 属性を使用して、Lightning コンテナの補助テキストを指定します。

メソッド

このコンポーネントは、次のメソッドをサポートします。

message(): ユーザ定義のメッセージをコンポーネントから iFrame コンテンツに送信します。

属性

属性名	属性型	説明	必須項目?
`alternativeText`	String	アクセシビリティのシナリオで代替テキストに使用します。
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	iframe 要素の CSS クラス。
`onerror`	Action	含まれているアプリケーションへのメッセージ送信時にエラーが発生した場合に実行するクライアント側コントローラのアクション。
`onmessage`	Action	含まれているアプリケーションからメッセージを受信した場合に実行するクライアント側コントローラのアクション。
`src`	String	URL 形式のリソース名、ランディングページ、およびクエリパラメータ。ナビゲーションは、特定された単一のページでのみサポートされます。	はい

Lightning コンポーネント開発者ガイド

lightning:container

属性