teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

タイトルの修正

2019/02/28 17:42

投稿

mvc_php
mvc_php

スコア19

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

1

文法と書式内容の修正

2019/02/28 17:42

投稿

mvc_php
mvc_php

スコア19

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,53 @@
1
- ページ内に複数ある iframe タグに対て同じ条件を適用したいと思っています。
1
+ ●前提・実現したい
2
- jQuery で iframe のコンテンツの高さを 自動取得し、取得した値に !important を追加したいと考えています。
3
2
 
4
- 下記のようにして !important して強制適用したいがどのようにすべきでしょうか
3
+ 楽天Goldといサーバー環境でカテゴリー別商品ページを表示したいと考えています。
5
- 対象ページの仕様上、強制適が必要になっ
4
+ 残念ながら楽天Gold内部で最新カテゴリーを自動取得することができない仕様でしたので有償の外部ツールを利取得したページを iframeタグ を使用してページに埋め込むことにしした
6
5
 
7
- 考え方としては正しいのかその辺りも含めご教示ただけますと幸いです
6
+ しかし残念なこに、取得た iframe のコンテンツに含まれる CSS で高さが固定されていて下記ようになっています。
8
7
 
9
8
  ```
9
+ <style>
10
+ iframe {
11
+ width: 100%;
12
+ height: 400px; /* 固定された高さ */
13
+ }
14
+ </style>
15
+ ```
16
+ 複数ある iframe 内のコンテンツの長さがそれぞれ異なるため、今後の新たな商品の追加や更新等を考えると jQuery で iframe 内のコンテンツの高さを取得して適切な高さで表示したいと思います。
17
+
18
+ ◆実現したいこと(最終的にこのようになれば解決できそうです)
19
+ ```<iframe src="vem01.html" scrolling="no" frameborder="0" style="height: 1521px !important;"></iframe>
20
+ <iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px !important;"></iframe>
21
+ <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px !important;"></iframe>
22
+ <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px !important;"></iframe>
23
+ <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px !important;"></iframe>
24
+ ```
25
+ 取得した高さの末尾に !important を追加し強制適用したいと考えています。
26
+ 上記のように実現するには 下記の jQuery でどのように処理したら良いでしょうか?
27
+
28
+ 下記は現状の動作内容になります。
29
+
30
+ ---
31
+
32
+ ★ソースコード(実行前)
33
+ ```
34
+ <html>
35
+ <head>
36
+ .
37
+ .
38
+ .
39
+ <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
40
+ </head>
41
+ <body>
42
+
43
+ <iframe src="vem01.html" scrolling="no" frameborder="0"></iframe>
44
+ <iframe src="vem02.html" scrolling="no" frameborder="0"></iframe>
45
+ <iframe src="vem03.html" scrolling="no" frameborder="0"></iframe>
46
+ <iframe src="vem04.html" scrolling="no" frameborder="0"></iframe>
47
+ <iframe src="vem05.html" scrolling="no" frameborder="0"></iframe>
48
+
49
+
50
+ <script>
10
51
  $("iframe").on("load", function(){
11
52
  try {
12
53
  $(this).height(0);
@@ -20,8 +61,57 @@
20
61
  });
21
62
 
22
63
  $("iframe").trigger("load");
64
+ </script>
65
+
66
+ </body>
67
+ </html>
23
68
  ```
24
- ※ライブラリVer: jquery-3.3.1.min.js
25
69
 
70
+ ---
26
71
 
72
+ ★ソースコード(実行後)
73
+ ```
74
+ <html>
75
+ <head>
76
+ .
77
+ .
78
+ .
79
+ <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
80
+ </head>
81
+ <body>
82
+
83
+ <iframe src="vem01.html" scrolling="no" frameborder="0" style="height: 1521px;"></iframe>
84
+ <iframe src="vem02.html" scrolling="no" frameborder="0" style="height: 1032px;"></iframe>
85
+ <iframe src="vem03.html" scrolling="no" frameborder="0" style="height: 887px;"></iframe>
86
+ <iframe src="vem04.html" scrolling="no" frameborder="0" style="height: 1440px;"></iframe>
87
+ <iframe src="vem05.html" scrolling="no" frameborder="0" style="height: 1143px;"></iframe>
88
+
89
+
90
+ <script>
91
+ $("iframe").on("load", function(){
92
+ try {
93
+ $(this).height(0);
94
+ $(this).height(this.contentWindow.document.documentElement.scrollHeight);
95
+ var imp = $(this).attr("style");
96
+ $(this).css({"cssText" : imp + "!important"});
97
+
98
+ } catch (e) {
99
+
100
+ }
101
+ });
102
+
103
+ $("iframe").trigger("load");
104
+ </script>
105
+
106
+ </body>
107
+ </html>
108
+ ```
109
+
110
+
111
+ ●実行環境
112
+ - OS: Windows10 64bit
113
+ - ブラウザ: Google Chrome 72.0.3626.109(64bit)
114
+ - ライブラリのバージョン: jquery-3.3.1.min.js
115
+
116
+
27
- うぞ宜しくお願いします。
117
+ 何卒ご教示のほど宜しくお願いします。