20140216【JS】ページ内に別サーバのページを表示させる

お題

ページ内に別サーバのページを表示させる

プログラム概要

iframe要素を使ってページ内に別サーバのページを表示させる。

その際、src属性のハッシュ値で指定した引数を別サーバで解析し表示させる

ソース

呼び出し元


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
</head>
<body>
    <iframe id="x-domain-site" src='http://127.0.0.1:8081/Second/iframe_othersite.html#{"hg1":"hoge1","hg2":"hoge2"}' style="width : 300px; height:120px;"></iframe>
</body>
</html>

別サーバ


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge2</title>
</head>
<body>
<div id="output"></div>
<script>
	var arg = JSON.parse(location.hash.substring(1));	// 先頭の"#"を外して残りをparseする
	document.getElementById("output").innerText = "hg1:" + arg.hg1 + " hg2:" + arg.hg2;
</script>
</body>
</html>

実行結果

f:id:mocomei:20140216125937p:plain