#背景
楽天RMSで楽天サイトを製作中です。
Goldサーバーにファイルを置いて、iframeでヘッダー、フッター、サイドメニュー、トップページを呼び出すという作りです。
仮に、header.html、sidemenu.html、footer.htmlとし、それらをindex.html内でiframeで呼び出して表示します。
現在、前段階としてテキストエディタでRMSに載せる前にページを作っているところです。
サイドメニューは項目(カテゴリー)が多いため、アコーディオン開閉式にしていて、クリックすると子メニューが展開し、再びクリックすると格納されるという表示をjQueryを使って実装しています。
iframeにはwidthとheightを指定しなくてはならない仕様と理解していますが、iframeに数値(今回はheightの方)を固定してしまうと、アコーディオンが閉じている状態のheightを指定すると、展開した時に下が切れてしまいます(スクロールして見ようと思えば見られますが)。逆に最大に展開した時の数値を指定すると表示はされますが、メイン部分のコンテンツが少なくフッターまでの高さが間延びしてしまって見栄えが悪いです。
###発生している問題・エラーメッセージ
そこで、iframeの高さを取得し、sidemenu.html内のカテゴリー部分のheightを取得し、展開したらその分のheightをiframeのheightに足す、格納したら引くということで対応しようとしていますが上手くいきません。使用言語はjQueryです。
###試したこと
1:
var iframeの高さ = xxxx; $("sidemenu.html内の該当タグ").on("click", function(){ iframeのheight + カテゴリ部分のheight; // で、iframeのheightに代入 }); $("sidemenu.html内の該当タグ").on("click", function(){ 展開状態のiframeのheight - 該当カテゴリ部分のheight; // で、iframeのheightに代入 });
実際はif文を使用しもう少し複雑ですが省略。
失敗:クリックした時点のheightを取得してしまい、展開後、格納後のheightを取得できませんでした。
展開後、格納後のheightはもう一度クリックしたときに取得され、画面の動きに合いません。
2:
var iframeの高さ = xxxx; $("sidemenu.html内の該当タグ").hover(function(){ iframeのheight + カテゴリ部分のheight; // で、iframeのheightに代入 }, function(){ load時点のiframeのheightにする; // で、iframeのheightに代入 });
heightの取得は期待通りに取得でき、iframeのheightは追随するもののhoverが外れると元に戻ってしまう。クリックしてメニューが展開した状態でhoverが外れるとメニューが途中で切れてしまう。
アコーディオン展開中はhoverが外れてもiframeのheightが保たれ、格納されたらiframeのheightが縮小するという具合にできれば理想です。
アコーディオンでheightが可変の要素にiframeのheightを追随させるにはどのようにすればよいのでしょうか?
宜しくお願いします。
###代替案
iframeの使用を断念する。
jQueryのloadを使ってインクルード方法を知り、試してみたところ期待通りの表示には成功しました。
ただ、コンソールに以下のような警告がでており非推奨のようで、実装するにはためらいます。
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. send @ jquery-1.9.1.min.js Uncaught TypeError: Cannot read property 'add' of null(…)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="euc-jp" /> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=980, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes" /> <title>xxx</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="xxx.css" /> <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> <script src="xxx.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#header").load("./header.html"); $("#side-area").load("./sidenavi.html"); $("#main").load("./main.html"); $("#footer").load("./footer.html"); }); </script> </head> <body> <div id="container"> <div id="wrapper"> <!-- ▼ヘッダー --> <div id="header" class="clearfix"></div><!-- /#header --> <!-- ▼コンテンツ --> <div id="content" class="clearfix"> <!-- ▼左メニュー --> <div id="side-area"></div><!-- /#side-area --> <!-- ▼メイン --> <div id="main"></div><!-- /#main --> </div><!-- /#content --> <!-- ▼フッター --> <div id="footer"></div><!-- /#footer --> </div><!-- /#wrapper --> </div><!-- /#container --> </body> </html>
###追記
代替案でいこうと思ったのですが、楽天goldサーバーにscriptファイルを置いてもRMS側で.jsファイルのまま呼び出す方法がなく(scriptタグ自体が禁止)、scriptを書いたhtmlファイルをiframeで呼び出すしかなく、結局iframeのheightに阻まれるという堂々巡りになりました。<head>内だけiframeで呼び出したらどうなるか、とか考えてみましたが不規則な方法なのでたぶんダメだと思い試しておりません。バグを利用したハック的なものはWebで見かけましたが、仕様変更等あるとまたイチからになってしうので今回は不採用です。やはり無理かなと諦めつつあります。