nakome
12/11/2016 - 6:35 PM

Demo Postmessage

Demo Postmessage

popup.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>popup client</title>
</head>
<body>

	<div class="result"></div>
	<hr>
	<textarea class="msg" placeholder="send message"></textarea>
	<br>
	<button class="send">Send</button>

  

	<script type="text/javascript">

		window.addEventListener('message',function(e){
			var result = e.data;
			document.querySelector('.result').innerHTML = [

				'<h1>',result.title,'</h1>',
				'<h2>',result.msg,'</h2>'

			].join('');
		});


		document.querySelector('.send').addEventListener('click',function(e){
			window.opener.postMessage(
			{
				title: 'Server say:',
				msg: document.querySelector('.msg').value
			}, '*');
		});


	</script>

</body>
</html>
index.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>

	<div class="result"></div>
	<hr>
	<textarea class="msg" placeholder="send message"></textarea>
	<br>
	<button class="send">Send</button>

	<script type="text/javascript">
		var client = window.open ("popup.html","mywindow", "width=350,height=250");

		window.addEventListener('message',function(e){
			var result = e.data;
			document.querySelector('.result').innerHTML = [

				'<h1>',result.title,'</h1>',
				'<h2>',result.msg,'</h2>'

			].join('');
		});

		document.querySelector('.send').addEventListener('click',function(){
			client.postMessage(
			{
				title: 'Client say:',
				msg: document.querySelector('.msg').value
			}, '*');
		});
	</script>
</body>
</html>