質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

7743閲覧

アコーディオンでheightが可変の要素にiframeのheightを追随させるにはどのようにすればよいのでしょうか?

wataru1127

総合スコア13

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/11/11 12:57

編集2022/01/12 10:55

#背景
楽天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で見かけましたが、仕様変更等あるとまたイチからになってしうので今回は不採用です。やはり無理かなと諦めつつあります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/11/11 14:49

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
wataru1127

2016/11/12 11:38

初めてteratailを利用したため、使い方が分かっていませんでした。ご指摘ありがとうございます。訂正しました。
guest

回答1

0

コンソールに以下のような警告がでており

jQuery 3.x.ではそのエラーが出ないように修正されているようです。

【jquery - Synchronous XMLHttpRequest warning and <script> - Stack Overflow】
http://stackoverflow.com/questions/28322636/synchronous-xmlhttprequest-warning-and-script

1.9などを使う場合、上記にあるように$.ajaxPrefilterを利用するか$.ajaxを使うかどちらかを試してみてください。

【jQuery.ajax() | jQuery API Documentation】
http://api.jquery.com/jQuery.ajax/

【jQueryのよく使いそうなAjax関係のAPIをまとめてみました | スターフィールド株式会社】
http://sterfield.co.jp/designer/jqueryのよく使いそうなajax関係のapiをまとめてみました/

投稿2016/11/12 11:50

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wataru1127

2016/11/14 10:25

お返事ありがとうございました。ただ残念ながらjQuery 3.x.にしてもAjax使ってもコンソールでのエラー表示は消えませんでした。
kei344

2016/11/14 10:59

$.ajaxPrefilterを利用するか$.ajaxを使うかどちらかを試してみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問