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