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>
実行結果