teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQueryで生成したiframeの中身にcssを適用したい

編集履歴

質問編集履歴

3

必要のない部分の削除

2018/03/18 15:54

投稿

xyunow
xyunow

スコア122

test CHANGED
File without changes
test CHANGED
@@ -102,8 +102,6 @@
102
102
 
103
103
  <body>
104
104
 
105
- <img src="./images/check.gif">
106
-
107
105
  <button class="box">テスト1</button>
108
106
 
109
107
  <script src="js/main.js" defer></script>

2

詳細の追加

2018/03/18 15:54

投稿

xyunow
xyunow

スコア122

test CHANGED
@@ -1 +1 @@
1
- jQueryで生成したiframeにcssを適用したい
1
+ jQueryで生成したiframeの中身にcssを適用したい
test CHANGED
@@ -1,36 +1,118 @@
1
+ 最初の質問から時間がたってしまいすみません。
2
+
3
+
4
+
1
5
  以下のようにjQueryでiframeを作成して、
2
6
 
3
- printframeクラス・print-imageクラスにcssを適用したいのですが、
7
+ printframeID・printframe-imageクラスなどにcssを適用したいのですが、
4
8
 
5
- どうやら印刷プレビューを見る限りcssがあたっていないようです。(iframe自体は生成されていて、画像も表示されます)
9
+ どうやら印刷プレビューを見る限りcssがあたっていないようです。
10
+
11
+ (出先の環境では画像も表示されていたのですが、自宅環境で再現したら、画像も表示されなくなってしまいました・・・)
6
12
 
7
13
  どう修正すれば、cssをあてることができるでしょうか？
8
14
 
15
+
16
+
17
+ 一応printContent変数内でstyle="color:#f00;"などとすることによってcssをあてることはできたのですが、
18
+
19
+ できればhtmlで読んでいるmodule.cssの中身をあてたいです。
20
+
21
+ 　
22
+
9
23
  ```javascript
10
24
 
11
- var printImg = $('.box img').attr('src');
25
+ (function () {
12
26
 
13
- printContent += '<img src=' + printImg + ' class="print-image">';
27
+ 'use strict';
14
28
 
15
- $('<iframe>', {
29
+
16
30
 
17
- name: 'framebox',
31
+ var openPrintRecommend = function(){
18
32
 
19
- class: 'printframe',
33
+ var printImg = "./images/check.gif";
20
34
 
21
- })
22
-
23
- .appendTo('body')
24
-
25
- .contents().find('body')
35
+ var printContent = '';
26
-
27
- .append(printContent);
28
36
 
29
37
 
30
38
 
31
- window.frames['framebox'].focus();
39
+ $("<img>").attr("src", printImg);
32
40
 
41
+
42
+
43
+ printContent += '<img src=' + printImg + ' class="printframe-image">';
44
+
45
+ printContent += '<p class="printframe-text">' + 'test' +'</p>';
46
+
47
+
48
+
49
+ console.log(printContent);
50
+
51
+
52
+
53
+ $('<iframe>', {
54
+
55
+ name: 'myiframe',
56
+
57
+ id: 'printframe',
58
+
59
+ })
60
+
61
+ .appendTo('body')
62
+
63
+ .contents().find('body')
64
+
65
+ .append(printContent);
66
+
67
+
68
+
69
+ window.frames['myiframe'].focus();
70
+
33
- window.frames['framebox'].print();
71
+ window.frames['myiframe'].print();
72
+
73
+ };
74
+
75
+ $('.box').on('click', openPrintRecommend);
76
+
77
+
78
+
79
+ })();
80
+
81
+
82
+
83
+ ```
84
+
85
+ ```html
86
+
87
+ <!DOCTYPE html>
88
+
89
+ <html>
90
+
91
+ <head>
92
+
93
+ <meta charset="utf-8">
94
+
95
+ <title></title>
96
+
97
+ <script src="js/jquery.js" defer></script>
98
+
99
+ <link href="css/module.css" rel="stylesheet">
100
+
101
+ </head>
102
+
103
+ <body>
104
+
105
+ <img src="./images/check.gif">
106
+
107
+ <button class="box">テスト1</button>
108
+
109
+ <script src="js/main.js" defer></script>
110
+
111
+ </body>
112
+
113
+ </html>
114
+
115
+
34
116
 
35
117
  ```
36
118
 
@@ -38,8 +120,12 @@
38
120
 
39
121
  ```css
40
122
 
41
- .printframe { margin: 0 auto; font-size: 3rem; }
123
+ .box { display: block; width: 100px; height: 100px; background-color: #f00; }
42
124
 
43
- .print-image { position: relative; left: 50%; transform: translateX(-50%); width: 30rem; display: block; }
125
+ .printframe-image { display: block; width: 300px; }
126
+
127
+ iframe#printframe .printframe-text { color: #f00; }
128
+
129
+ /*↑このcssがあたりません*/
44
130
 
45
131
  ```

1

文章の追加

2018/03/18 15:53

投稿

xyunow
xyunow

スコア122

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  printframeクラス・print-imageクラスにcssを適用したいのですが、
4
4
 
5
- どうやら印刷プレビューを見る限りcssがあたっていないようです。
5
+ どうやら印刷プレビューを見る限りcssがあたっていないようです。(iframe自体は生成されていて、画像も表示されます)
6
6
 
7
7
  どう修正すれば、cssをあてることができるでしょうか？
8
8