13hoop/iframe.html

## iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: palevioletred;
        }
    </style>
</head>
<body>
    <h3>iframe 中的html -- 来自不同域bbb.com中的html</h3>
	<div class="page">
		<form action="">
			输入：<br>
			<input class="input" type="text">
		</form>
	</div>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
		var input = $('.page .input')[0]
		input.addEventListener('input', function(e) {
			console.log(this.value)
			window.parent.postMessage(this.value, '*')
		})

		window.addEventListener('message', function(e) {
			input.value = e.data
			console.log(e.data)
		})
    </script>
</body>
</html>

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>server-mock使用说明</title>
<style>
  .container{
    width: 900px;
    margin: 0 auto;
		background: slategray;
  }
	.page {
		background: lightseagreen;
		text-align: center;
	}
	iframe {
		width: 300px;
	}
</style>
</head>
<body>
	<div class="container">
		<h1>aaa域中的html</h1>
		<hr> 点击去另一域bbb中加载数据
		<br>
		<button>点击</button>
	</div>
	<hr>
	<div class="page">
		<form action="">
			输入：<br>
			<input class="input" type="text">
		</form>
		<iframe src="http://bbb.com:3000/iframe.html" frameborder="0"></iframe>
	</div>

	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		var btn = $('button')[0]
		var container = $('.container')[0]
		btn.addEventListener('click', function() {
			xhr = new XMLHttpRequest()
			xhr.open('get', 'http://bbb.com:3000/info', true)
			xhr.send()
			var html = ""
			xhr.onreadystatechange = function() {
				if(xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
					result = JSON.parse(xhr.responseText)
					html = document.createElement('p')
					html.innerText = result['info']
					container.appendChild(html)
				}else {
					console.log('error')
				}
			}
		})

		var callBack = function(data) {
			console.log("^^^^ . ^^^^^" + data)
			alert('本地写好了的callBack，被远程js调用，并传递数据: ' + data.info)
		}
	</script>
	<script src="http://bbb.com:3000/info.js"></script>
	<script>
		var iframe = $('.page iframe')[0]
		var input = $('.page .input')[0]

		input.addEventListener('input', function(e) {
			console.log(this.value)
			window.frames[0].postMessage(this.value, '*')
		})

		window.addEventListener('message', function(e) {
			input.value = e.data
			console.log(e.data)
		})
	</script>
</body>
</html>

## router.js
/**
 * 发送 GET 请求， 无参数
 * GET /hello
 * 返回响应数据
 */
app.get('/info', function(req, res) {
	var data = {info: 'Greating from router.js'}
	res.header("Access-Control-Allow-Origin", "*");
	res.send(data)
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body {
	background: palevioletred;
	}
	</style>
	</head>
	<body>
	<h3>iframe 中的html -- 来自不同域bbb.com中的html</h3>
	<div class="page">
	<form action="">
	输入：<br>
	<input class="input" type="text">
	</form>
	</div>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	var input = $('.page .input')[0]
	input.addEventListener('input', function(e) {
	console.log(this.value)
	window.parent.postMessage(this.value, '*')
	})

	window.addEventListener('message', function(e) {
	input.value = e.data
	console.log(e.data)
	})
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>server-mock使用说明</title>
	<style>
	.container{
	width: 900px;
	margin: 0 auto;
	background: slategray;
	}
	.page {
	background: lightseagreen;
	text-align: center;
	}
	iframe {
	width: 300px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>aaa域中的html</h1>
	<hr> 点击去另一域bbb中加载数据
	<br>
	<button>点击</button>
	</div>
	<hr>
	<div class="page">
	<form action="">
	输入：<br>
	<input class="input" type="text">
	</form>
	<iframe src="http://bbb.com:3000/iframe.html" frameborder="0"></iframe>
	</div>

	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	var btn = $('button')[0]
	var container = $('.container')[0]
	btn.addEventListener('click', function() {
	xhr = new XMLHttpRequest()
	xhr.open('get', 'http://bbb.com:3000/info', true)
	xhr.send()
	var html = ""
	xhr.onreadystatechange = function() {
	if(xhr.readyState === 4 && (xhr.status === 200 \|\| xhr.status === 304)) {
	result = JSON.parse(xhr.responseText)
	html = document.createElement('p')
	html.innerText = result['info']
	container.appendChild(html)
	}else {
	console.log('error')
	}
	}
	})

	var callBack = function(data) {
	console.log("^^^^ . ^^^^^" + data)
	alert('本地写好了的callBack，被远程js调用，并传递数据: ' + data.info)
	}
	</script>
	<script src="http://bbb.com:3000/info.js"></script>
	<script>
	var iframe = $('.page iframe')[0]
	var input = $('.page .input')[0]

	input.addEventListener('input', function(e) {
	console.log(this.value)
	window.frames[0].postMessage(this.value, '*')
	})

	window.addEventListener('message', function(e) {
	input.value = e.data
	console.log(e.data)
	})
	</script>
	</body>
	</html>
	/**
	* 发送 GET 请求，无参数
	* GET /hello
	* 返回响应数据
	*/
	app.get('/info', function(req, res) {
	var data = {info: 'Greating from router.js'}
	res.header("Access-Control-Allow-Origin", "*");
	res.send(data)
	});