An example of postMessage cross origin JS requests

This is an example of a postMessage implementation to use JS methods within pages hosted on different domains. What is a an example of postmessage cross origin js requests How do you make a an example of postmessage cross origin js requests? This script and codes were developed by Jeff Daze on 24 March 2022, Thursday.

How do I make an an example of postmessage cross origin js requests?
  1. An example of postMessage cross origin JS requests Previews
  2. An example of postMessage cross origin JS requests HTML Codes
  3. An example of postMessage cross origin JS requests CSS Codes
  4. An example of postMessage cross origin JS requests JS Codes
An example of postMessage cross origin JS requests Previews

An example of postMessage cross origin JS requests HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>An example of postMessage cross origin JS requests</title>
  
  
  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- some example content to represent the CP -->
<nav class="navbar navbar-default navbar-inverse" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- this is a fair emulation of our current taskbar, as it would appear in fullwidth mode... -->

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        
        
      
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Messaging System Demo</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="container-fluid">

  <form id="form">
    <input type="text" id="msg" value="Message to send"/>
    <input type="submit"/>
  </form>

  <div id="test">See response here from iFramed content...</div>
  <iframe id="externalContent" src="http://jeffdaze.com/hostopia/message/childPage2.html"></iframe>

</div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

An example of postMessage cross origin JS requests CSS Codes

#externalContent{
  display:block;
  width:500px;
  height:500px;
  margin:50px auto;
}

An example of postMessage cross origin JS requests JS Codes

//expected origin of iFramed content...
var ORIGIN = "https://jeffdaze.com";

//listen for messages coming from the expected origin...
function listener(event){
  if(event.origin !== ORIGIN){
    return;
  }
  console.log(event);

  var response = JSON.parse(event.data);

  document.getElementById("test").innerHTML = "received: "+response['newHeight']+" from: "+event.origin;
}

//attach a listener for when postMessage calls come in...
if (window.addEventListener){
  addEventListener("message", listener, false);

  //IE test
  //addEventListener("onmessage", listener, false);
}else{
  attachEvent("onmessage", listener);
}

//send a message into the hosted iFrame...
document.getElementById("form").onsubmit = function(e){
  //target the iFrame
  var win = document.getElementById("externalContent").contentWindow;
  //hey! what are we sending?
  console.log("transmitting: "+document.getElementById("msg").value);

  //transmit our message to the iFramed page...
  //use JSON.stringify() to send text...
  win.postMessage(JSON.stringify({ 'newMessage': document.getElementById("msg").value }), ORIGIN);
  //IE?
  //win.postMessage("'newMessage': document.getElementById('msg').value", ORIGIN);

  //e.preventDefault();
  return false;
};
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.