Pannellumを使って、iframeで360度画像をブログに取り込む２

html5

http://d.hatena.ne.jp/kenmituo/20170309/1489035138の続き。

Pannellumってのは「親要素のHTMLファイルのiframeに中身の子要素HTMLファイルに画像を貼り付けて表示する。」です。

画像ごとにファイルを作るのも面倒なので魔改造することにした。

親要素

iframeを埋め込むHTMLファイル、ifremeのsrcにパラメータを埋め込みます。

index.html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>テスト</title>
</head>
<body>
    <iframe width="800" height="400" allowfullscreen style="border-style:none;" src="iframe.html?alma.jpg"></iframe>
    <p>キャッシュ対策が難しい。firefoxはF5でiframeが更新されない。Ctrl+F5ならOk</p>
    <p>呼び出し側のindex.htmlのiframeにオプションでパラメータを与えると、iframe.htmlでパラメータを受け取って画像を差し替えられる</p>
</body>
</html>

「src="iframe.html?alma.jpg"」ってのがミソ、公式のオプション指定は意味なさそう。

子要素

iframeの中に表示されるHTMLファイル、URLからパラメータを取得します

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="pannellum.css"/>
    <script type="text/javascript" src="pannellum.js"></script>
    
    <script type="text/javascript">
	<!--
	//パラメータ
	var img_name = location.href.split("?")[1];
//undefined対策してない。
	-->
	</script>

    <style>
    #panorama {
        height: 380px;
        /*iframeの-20px*/
    }
    </style>
</head>
<body>

<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": img_name,
    "autoLoad": true,
    "autoRotate": -2
});
</script>

</body>
</html>

これなら簡単に増殖できる。