JSONを使いページから他ページへ情報を渡す方法
同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。
JSONでできるようなので、サイトを参考にしながら作ってみました。
各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、
集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。
しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。
アドバイスを頂けないでしょうか。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>集めたページ</title>
<script type="text/javascript" src="js/json.js"></script>
</head>
<body onload="jsontop()">
<div>
<ul>
<li><a href=""><span></span></a></li>
<li><img src=""></li>
</ul>
・・・・・・ULがページ数の数だけ続く
</div>
</body>
</html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>各ページのサンプル</title>
<script type="text/javascript" src="js/json.js"></script>
</head>
<body onload="json(1)">
<h1>1ページ目</h1>
<h2>タイトル</h2>
<p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p>
<dl>
<dt>サンプル画像</dt>
<dd><img src="img/sample01.jpg"></dd>
</dl>
</body>
</html>
-----json.js------
function json(no){
var obj = {
h1: no+"ページ目",
imgsrc: "img/sample0"+no+".jpg",
thisurl:"page01/sample01.html"
};
var str = JSON.stringify(obj);
}
function jsontop(){
JSON.parse(str);
var tagimg = document.getElementsByTagName("img");
var tagspan = document.getElementsByTagName("span");
var tagli1 = document.getElementsByTagName("li")[0];
tagspan[0].innerHTML = obj.h1; //１ページ目のタイトルを取得し置き換える
var img = new Image();
tagimg[0].src = obj.imgsrc; //１ページ目の画像のパスを取得し置き換える
tagli1.href = obj.thisurl; //１ページ目のURLをアンカーに設定
}
お礼
ありがとうございます。なかなか回答がつかなかったので、そもそも難しいのかなと思い始めていたのですが力強いお言葉をいただきましたので、考えてみます。