SalesforceのLightningコンポーネントとVisualforce間で通信するには？ SalesforceではLightningコンポーネントからiframeを使って、Visualforceページを読み込むことがあります。その際にLightningコンポーネントとVisualforceページの間で通信するには、window.postMessage()を利用します。 window.postMessage()はSalesforceが提供するAPIではなく、ブラウザが標準で提供するJavaScript APIです。windowオブジェクトにメッセージを送信するため、誰でもアクセス可能です。そのため、個人情報など機密性の高い情報の通信では利用しない方がいいでしょう。

LightningコンポーネントとVisualforce間で通信する方法

LightningコンポーネントからVisualforceページにメッセージを送信する方法

【Step1】LightningコンポーネントのComponentを実装する

<aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"">

  <aura:attribute name=""message"" type=""String""/>
  <!-- Visualforceページの読み込み元ホスト名. -->
  <aura:attribute name=""vfHost"" type=""String""
    default=""testdomain-dev-ed--c.visual.force.com""/>

  <lightning:input type=""text"" label=""メッセージ："" value=""{!v.message}""/>
  <lightning:button label=""Visualforceページへ送信"" onclick=""{!c.sendToVF}""/>

  <iframe aura:id=""vfFrame"" src=""{!'https://' + v.vfHost + '/apex/myvfpage'}""/>

</aura:component>

【Step2】メッセージ送信ボタンクリック時のControllerを実装する

({
  sendToVF: function (component, event, helper) {
    var message = component.get(""v.message"");

    // Visualforceページの読み込み元ホスト名を取得し、
    // 「プロトコル+ホスト名」のURLを生成
    var vfOrigin = ""https://"" + component.get(""v.vfHost"");

    // VisualforceページのWindow オブジェクトを取得
    var vfWindow = component.find(""vfFrame"").getElement().contentWindow;

    // window.postMessage()でVisualforceページにメッセージを送る
    // 第1引数は送信メッセージを指定
    // 第2引数は送信先Visualforceページを指定
    vfWindow.postMessage(message, vfOrigin);
  }
})

【Step3】Visualforceページでメッセージの受信処理を実装する

<apex:page>
<script>
  // Lightningコンポーネントの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
  var lexOrigin = ""https://testdomain-dev-ed.lightning.force.com"";
  // メッセージを受信した時のイベントを追加
  window.addEventListener(""message"", function(event) {
    // メッセージ受信イベントの発生元を判定
    if (event.origin !== lexOrigin) {
      // セキュリティを考慮し、メッセージ受信イベントの発生元が
      // Lightningコンポーネントの読み込み元と一致しない場合は処理を中断
      return;
    }
    // コンソールにメッセージを出力
    console.log(event.data);
  }, false);
</script>
</apex:page>

VisualforceページからLightningコンポーネントへメッセージを送信する方法

【Step1】Visualforceページを実装する

<apex:page>
  <input id=""message"" type=""text""/>
  <button onclick=""sendToLC()"">Lightningコンポーネントへ送信</button>

  <script>
    // Lightningコンポーネントの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
    var lcOrigin = ""https://testdomain-dev-ed.lightning.force.com"";

    function sendToLC() {
       var message = document.getElementById(""message"").value;
       // 親windowであるLightningコンポーネントにメッセージを送信
       // 第1引数は送信メッセージを指定
       // 第2引数は送信先のLightningコンポーネントを指定
       parent.postMessage(message, lcOrigin);
    }
  </script>
</apex:page>

【Step2】メッセージを受信するComponentを実装する

<aura:component implements=""flexipage:availableForAllPageTypes"" access=""global"">
  <!-- Visualforceページの読み込み元ホスト名. -->
  <aura:attribute name=""vfHost"" type=""String""
    default=""testdomain-dev-ed--c.visual.force.com""/>

  <!-- メッセージを受信する関数を設定 -->
  <aura:handler name=""init"" value=""{!this}"" action=""{!c.doInit}""/>

  <iframe aura:id=""vfFrame"" src=""{!'https://' + v.vfHost + '/apex/myvfpage'}"" />
</aura:component>

【Step3】メッセージを受信するControllerを実装する

({
  doInit: function (component) {
    // Visualforceページの読み込み元の「プロトコル＋ホスト名（＋ポート番号）」
    var vfOrigin = ""https://"" + component.get(""v.vfHost"");

    // メッセージを受信した時のイベントを追加
    window.addEventListener(""message"", $A.getCallback(function (event) {
      // メッセージ受信イベントの発生元を判定
      if (event.origin !== vfOrigin) {
        // セキュリティを考慮し、メッセージ受信イベントの発生元が
        // Visualforceページの読み込み元と一致しない場合は処理を中断
        return;
      }
      // コンソールにメッセージを出力
      console.log(event.data);
    }), false);
  }
})

window.postMessage()を利用して、機能間でのメッセージの送受信を実装してみよう

この記事の監修者・著者

株式会社オープンアップITエンジニアAWSパートナー/Salesforce認定コンサルティングパートナー 認定企業

ITエンジニア派遣サービス事業を行っています。AWSやSalesforceなど専門領域に特化したITエンジニアが4,715名在籍し、常時100名以上のITエンジニアの即日派遣が可能です。

・2021年：AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
・2022年3月：人材サービス型 AWSパートナー認定
・AWS認定資格保有者数1,154名（2024年6月現在）
・Salesforce認定コンサルティングパートナー
・Salesforce認定資格者276名在籍（2024年5月現在）
・LPIC＋CCNA 認定資格者：472 名（2024年6月時点）

最新の投稿

• 2024-12-27営業インタビュー情報共有の活性化の中心に。SP企画部の新たな取り組み
• 2024-07-01営業インタビュー最短で当日にご提案可能。 OPE営業の対応が早い3つの理由
• 2024-07-01営業インタビュー研修見学ツアーが高評価！「お客様のOPEに対する期待を高め、継続に貢献できればと思います。」
• 2024-07-01営業インタビュー信頼関係を構築し、エンジニアの長期就業へ