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页面发消息 ，子页面接到后，再向父页面发送消息    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);        });    }

子页面

   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);

最后，你会从收到子页面的alert

再收到主页面的alert

作者：仓储大叔，张占岭，
荣誉：微软MVP
QQ：853066980

支付宝扫一扫，为大叔打赏!