質問編集履歴

2

タイトルの修正

2019/02/28 17:42

投稿

mvc_php
mvc_php

スコア19

test CHANGED
@@ -1 +1 @@
1
- iframeの高さを自動調整!important化するにはどうしたら良いでしょうか?
1
+ iframeのコンテンツの高さを取得強制的にstyleを適用するにはどうしたら良いでしょうか?
test CHANGED
File without changes

1

文法と書式内容の修正

2019/02/28 17:42

投稿

mvc_php
mvc_php

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,102 @@
1
+ ●前提・実現したいこと
2
+
3
+
4
+
1
- ページ内に複数ある iframe タグに対して同じ条件適用したいと思っています。
5
+ 楽天Goldというサーバー環境でカテゴリー別に商品ページを表示したいと考えています。
6
+
2
-
7
+ 残念ながら楽天Gold内部で最新のカテゴリーを自動取得することができない仕様でしたので有償の外部ツールを利用して取得したページを iframeタグ を使用してページに埋め込むことにしました。
8
+
9
+
10
+
3
- jQuery iframe のコンテンツの高さを 自動取得し、取得した値!important を追加したと考えています。
11
+ しかし残念なことに、取得した iframe のコンテンツに含まれる CSS で高さが固定されていて下記のようになっています。
4
-
5
-
6
-
7
- 下記のようにして !important して強制適用したいですがどのようにすべきでしょうか。
12
+
8
-
9
- 対象ページの仕様上、強制適用が必要になっています。
13
+
10
-
11
-
12
-
13
- 考え方としては正しいのかその辺りも含めご教示いただけますと幸いです。
14
+
14
-
15
-
16
-
17
- ```
15
+ ```
16
+
17
+ <style>
18
+
19
+ iframe {
20
+
21
+ width: 100%;
22
+
23
+ height: 400px; /* 固定された高さ */
24
+
25
+ }
26
+
27
+ </style>
28
+
29
+ ```
30
+
31
+ 複数ある iframe 内のコンテンツの長さがそれぞれ異なるため、今後の新たな商品の追加や更新等を考えると jQuery で iframe 内のコンテンツの高さを取得して適切な高さで表示したいと思います。
32
+
33
+
34
+
35
+ ◆実現したいこと(最終的にこのようになれば解決できそうです)
36
+
37
+ ```<iframe src="vem01.html" scrolling="no" frameborder="0" style="height: 1521px !important;"></iframe>
38
+
39
+ <iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px !important;"></iframe>
40
+
41
+ <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px !important;"></iframe>
42
+
43
+ <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px !important;"></iframe>
44
+
45
+ <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px !important;"></iframe>
46
+
47
+ ```
48
+
49
+ 取得した高さの末尾に !important を追加し強制適用したいと考えています。
50
+
51
+ 上記のように実現するには 下記の jQuery でどのように処理したら良いでしょうか?
52
+
53
+
54
+
55
+ 下記は現状の動作内容になります。
56
+
57
+
58
+
59
+ ---
60
+
61
+
62
+
63
+ ★ソースコード(実行前)
64
+
65
+ ```
66
+
67
+ <html>
68
+
69
+ <head>
70
+
71
+ .
72
+
73
+ .
74
+
75
+ .
76
+
77
+ <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
78
+
79
+ </head>
80
+
81
+ <body>
82
+
83
+
84
+
85
+ <iframe src="vem01.html" scrolling="no" frameborder="0"></iframe>
86
+
87
+ <iframe src="vem02.html" scrolling="no" frameborder="0"></iframe>
88
+
89
+ <iframe src="vem03.html" scrolling="no" frameborder="0"></iframe>
90
+
91
+ <iframe src="vem04.html" scrolling="no" frameborder="0"></iframe>
92
+
93
+ <iframe src="vem05.html" scrolling="no" frameborder="0"></iframe>
94
+
95
+
96
+
97
+
98
+
99
+ <script>
18
100
 
19
101
  $("iframe").on("load", function(){
20
102
 
@@ -42,12 +124,110 @@
42
124
 
43
125
  $("iframe").trigger("load");
44
126
 
127
+ </script>
128
+
129
+
130
+
131
+ </body>
132
+
133
+ </html>
134
+
45
- ```
135
+ ```
136
+
137
+
138
+
46
-
139
+ ---
140
+
141
+
142
+
143
+ ★ソースコード(実行後)
144
+
145
+ ```
146
+
147
+ <html>
148
+
149
+ <head>
150
+
151
+ .
152
+
153
+ .
154
+
155
+ .
156
+
157
+ <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
158
+
159
+ </head>
160
+
161
+ <body>
162
+
163
+
164
+
165
+ <iframe src="vem01.html" scrolling="no" frameborder="0" style="height: 1521px;"></iframe>
166
+
167
+ <iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px;"></iframe>
168
+
169
+ <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px;"></iframe>
170
+
171
+ <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px;"></iframe>
172
+
173
+ <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px;"></iframe>
174
+
175
+
176
+
177
+
178
+
179
+ <script>
180
+
181
+ $("iframe").on("load", function(){
182
+
183
+ try {
184
+
185
+ $(this).height(0);
186
+
187
+ $(this).height(this.contentWindow.document.documentElement.scrollHeight);
188
+
189
+ var imp = $(this).attr("style");
190
+
191
+ $(this).css({"cssText" : imp + "!important"});
192
+
193
+
194
+
195
+ } catch (e) {
196
+
197
+
198
+
199
+ }
200
+
201
+ });
202
+
203
+
204
+
205
+ $("iframe").trigger("load");
206
+
207
+ </script>
208
+
209
+
210
+
211
+ </body>
212
+
213
+ </html>
214
+
215
+ ```
216
+
217
+
218
+
219
+
220
+
221
+ ●実行環境
222
+
223
+ - OS: Windows10 64bit
224
+
225
+ - ブラウザ: Google Chrome 72.0.3626.109(64bit)
226
+
47
- ライブラリVer: jquery-3.3.1.min.js
227
+ - ライブラリのバージョン: jquery-3.3.1.min.js
48
-
49
-
50
-
51
-
52
-
228
+
229
+
230
+
231
+
232
+
53
- うぞ宜しくお願いします。
233
+ 何卒ご教示のほど宜しくお願いします。