keycloak~從login-status-iframe頁面總結如何跨域傳值

login-status-iframe.html是keycloak爲我們提供的一種檢測用戶登錄狀態的頁面，它要求用戶對接的系統通過iframe進行嵌入，然後通過window.addEventListener去訂閱子頁面的信息。

提示： 所有 HTML DOM 事件，可以查看我們完整的https://www.runoob.com/jsref/dom-obj-event.html。

addEventListener說明

• element.addEventListener(event, function, useCapture)
  • event（*必須）：字符串，指定事件名，注意: 不要使用 “on” 前綴。 例如，使用 “click” ,而不是使用 “onclick”。
  • function（*必須）：指定要事件觸發時執行的函數。
  • useCapture（*可選）：布爾值，指定事件是否在捕獲或冒泡階段執行。
    • true - 事件句柄在捕獲階段執行
    • false - 默認,事件句柄在冒

跨域傳值的測試

• 主頁面：http://localhost:9090
• iframe頁面：http://localhost:9090

主頁面

<iframe src="http://localhost:7070/toLogin" id="you"></iframe>

<script>
  // 父頁面向iframe頁面發消息 ，子頁面接到後，再向父頁面發送消息
    var iframe = document.getElementById('you');
    iframe.onload = function () {
        // 向子頁面發消息
        iframe.contentWindow.postMessage('Your message', 'http://localhost:7070');

        // 訂閱從子頁面發過來的消息
        window.addEventListener('message', function (event) {
            alert("主的" + event.origin);
            if (event.origin !== 'http://localhost:7070') {//這裏的origin必須是子頁面的域名，否則不會執行，因爲這消息是子頁面發過來的
                return;
            }
            console.log(event.data);
        });

    }
</script>

子頁面

<script>
 <!-- 爲了測試iframe與主頁面之間傳遞數據添加的 -->
  window.addEventListener('message', function (event) {
      alert(event.origin);
      if (event.origin !== 'http://localhost:9090') { //http://localhost:9090是主頁面的地址，說明消息是從主頁面發過來的
          return;
      }
      // 處理從父頁面發送過來的消息
      alert('Received message: ' + event.data);
      // 向主頁面再發消息
      event.source.postMessage('Hello from iframe!', event.origin);
  }, false);
</script>

最後，你會從收到子頁面的alert

再收到主頁面的alert