質問編集履歴

2

代替案に対する追記

2016/11/14 10:33

投稿

wataru1127
wataru1127

スコア13

test CHANGED
File without changes
test CHANGED
@@ -233,3 +233,9 @@
233
233
  </html>
234
234
 
235
235
  ```
236
+
237
+
238
+
239
+ ###追記
240
+
241
+ 代替案でいこうと思ったのですが、楽天goldサーバーにscriptファイルを置いてもRMS側で.jsファイルのまま呼び出す方法がなく(scriptタグ自体が禁止)、scriptを書いたhtmlファイルをiframeで呼び出すしかなく、結局iframeのheightに阻まれるという堂々巡りになりました。<head>内だけiframeで呼び出したらどうなるか、とか考えてみましたが不規則な方法なのでたぶんダメだと思い試しておりません。バグを利用したハック的なものはWebで見かけましたが、仕様変更等あるとまたイチからになってしうので今回は不採用です。やはり無理かなと諦めつつあります。

1

コード部分をコードブロックで囲いました。またiframeを使わない方法についても記述を加えました。

2016/11/14 10:33

投稿

wataru1127
wataru1127

スコア13

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  1:
34
34
 
35
-
35
+ ```
36
36
 
37
37
  var iframeの高さ = xxxx;
38
38
 
@@ -54,6 +54,10 @@
54
54
 
55
55
  });
56
56
 
57
+ ```
58
+
59
+
60
+
57
61
 
58
62
 
59
63
  実際はif文を使用しもう少し複雑ですが省略。
@@ -62,13 +66,15 @@
62
66
 
63
67
  失敗:クリックした時点のheightを取得してしまい、展開後、格納後のheightを取得できませんでした。
64
68
 
69
+ 展開後、格納後のheightはもう一度クリックしたときに取得され、画面の動きに合いません。
70
+
65
71
 
66
72
 
67
73
  ----------------------------------
68
74
 
69
75
  2:
70
76
 
71
-
77
+ ```
72
78
 
73
79
  var iframeの高さ = xxxx;
74
80
 
@@ -86,6 +92,10 @@
86
92
 
87
93
  });
88
94
 
95
+ ```
96
+
97
+
98
+
89
99
 
90
100
 
91
101
  heightの取得は期待通りに取得でき、iframeのheightは追随するもののhoverが外れると元に戻ってしまう。クリックしてメニューが展開した状態でhoverが外れるとメニューが途中で切れてしまう。
@@ -101,3 +111,125 @@
101
111
 
102
112
 
103
113
  宜しくお願いします。
114
+
115
+
116
+
117
+ ###代替案
118
+
119
+ iframeの使用を断念する。
120
+
121
+ jQueryのloadを使ってインクルード方法を知り、試してみたところ期待通りの表示には成功しました。
122
+
123
+ ただ、コンソールに以下のような警告がでており非推奨のようで、実装するにはためらいます。
124
+
125
+
126
+
127
+ ```
128
+
129
+ 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/.
130
+
131
+ send @ jquery-1.9.1.min.js
132
+
133
+ Uncaught TypeError: Cannot read property 'add' of null(…)
134
+
135
+ ```
136
+
137
+
138
+
139
+ ```
140
+
141
+ <!DOCTYPE html>
142
+
143
+ <html lang="ja">
144
+
145
+ <head>
146
+
147
+ <meta charset="euc-jp" />
148
+
149
+ <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
150
+
151
+ <meta name="viewport" content="width=980, maximum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
152
+
153
+ <title>xxx</title>
154
+
155
+ <meta name="description" content="" />
156
+
157
+ <meta name="keywords" content="" />
158
+
159
+ <link rel="stylesheet" href="xxx.css" />
160
+
161
+ <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script>
162
+
163
+ <script src="xxx.js"></script>
164
+
165
+ <script type="text/javascript">
166
+
167
+ $(document).ready(function(){
168
+
169
+
170
+
171
+ $("#header").load("./header.html");
172
+
173
+
174
+
175
+ $("#side-area").load("./sidenavi.html");
176
+
177
+
178
+
179
+ $("#main").load("./main.html");
180
+
181
+
182
+
183
+ $("#footer").load("./footer.html");
184
+
185
+ });
186
+
187
+ </script>
188
+
189
+ </head>
190
+
191
+ <body>
192
+
193
+ <div id="container">
194
+
195
+ <div id="wrapper">
196
+
197
+ <!-- ▼ヘッダー -->
198
+
199
+ <div id="header" class="clearfix"></div><!-- /#header -->
200
+
201
+ <!-- ▼コンテンツ -->
202
+
203
+ <div id="content" class="clearfix">
204
+
205
+
206
+
207
+ <!-- ▼左メニュー -->
208
+
209
+ <div id="side-area"></div><!-- /#side-area -->
210
+
211
+
212
+
213
+ <!-- ▼メイン -->
214
+
215
+ <div id="main"></div><!-- /#main -->
216
+
217
+
218
+
219
+ </div><!-- /#content -->
220
+
221
+
222
+
223
+ <!-- ▼フッター -->
224
+
225
+ <div id="footer"></div><!-- /#footer -->
226
+
227
+ </div><!-- /#wrapper -->
228
+
229
+ </div><!-- /#container -->
230
+
231
+ </body>
232
+
233
+ </html>
234
+
235
+ ```