An example of postMessage cross origin JS requests

Developer
Jeff Daze
Size
2,959 Kb
Views
6,072
  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

How do I make an 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 18 January 2023, Wednesday.

An example of postMessage cross origin JS requests Previews
IQ Test

An example of postMessage cross origin JS requests - Script Codes 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 - Script Codes CSS Codes

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

An example of postMessage cross origin JS requests - Script Codes 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;
};
An example of postMessage cross origin JS requests - Script Codes
An example of postMessage cross origin JS requests - Script Codes
Home Page Home
Developer Jeff Daze
Username jeffdaze
Uploaded January 18, 2023
Rating 3
Size 2,959 Kb
Views 6,072
Do you need developer help for An example of postMessage cross origin JS requests?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Daze (jeffdaze) Script Codes
Name
Transparent Gradient
Attempt to implement diamond square algorithm
JS test and Box Shadow
A Pen by Jeff Daze
Winter Scene
A test card for a Munchkin-like game
Tilemap Edge CSS
Angular Drag Example
Quick torus demo three.js
Simulation of famous C64 code...
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!