JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<!doctype html>
<html lang="en">


  <body>

    <a id="A" href="https://www.jquery.com">A - Start</a><br />
    <a id="B" href="https://www.jquery.com">B - Send Postmessage</a><br />
    <a id="C" href="https://www.jquery.com">C - Link/Submit</a><br />

    <div id="log"></div>

    <input id="postMessageReceived" type="text" value="0" />

  </body>

</html>

JavaScript

function onEvent(obj, type, callback) {
    if (obj.addEventListener) {
      obj.addEventListener(type, callback, false);
      return true;
    } else if (obj.attachEvent) {
      obj.attachEvent('on' + type, callback);
      return true;
    }
    return false;
  }

  onEvent(window, 'message', receiveMessage);

  function receiveMessage(event) {
    $("<div>")
      .append("Received: " + event.origin + " [" + event.data + "]")
      .appendTo("#log");

    $("#postMessageReceived").val(1);

    //$("#C").trigger("click");
    $("#C")[0].click();
  }

  $("#A").click(function(event) {
    alert("Clicked A");

    event.preventDefault();

    $("<div>")
      .append("default " + event.type + " prevented")
      .appendTo("#log");


    // while ($("#A").val() !== "1") {
    //   await new Promise(r => setTimeout(r, 500));
    // }

    // var checkExist = setInterval(function() {
    // alert($('#postMessage').val());
    //   if ($('#postMessage').val() == "1") {
    //     console.log("Exists!");
    //     clearInterval(checkExist);
    //   }
    // }, 100); // check every 100ms

    $("#B").trigger("click");

    alert("A Completed");
  });

  $("#B").click(function(event) {
  	event.preventDefault();
    alert("Clicked B");

    $("<div>")
      .append("trigger postMessage")
      .appendTo("#log");

    window.postMessage("Hello World!", "*");
    //return false;
  })

  $("#C").click(function(event) {
    alert("Clicked C");

    $("<div>")
      .append("trigger link")
      .appendTo("#log");

    // return false;
  })