teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問GASで親ページのインフレームからリンクした子ページが表示されない。

編集履歴

質問編集履歴

6

簡潔にしました

2019/01/18 15:13

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
@@ -1,10 +1,16 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
+
4
+
3
- ```ここに言語を入力
5
+ ```ここに言語を入力
6
+
4
-
7
+ 質問に対しテラテイルから編集してはと連絡があり簡潔に編集しました。
8
+
9
+
10
+
5
- ローカルで起動していたHTMLをGASに移植したのですが
11
+ ローカルで使用していた備忘録をGASに移植しました。
6
-
12
+
7
- 　ページ全体の構成は－－－－－
13
+ 全体の構成
8
14
 
9
15
  一つの親ページとメニューで選択される複数の子ページがあります。
10
16
 
@@ -14,119 +20,67 @@
14
20
 
15
21
  インフレームには複数ある子ページをメニューで選択して表示します。
16
22
 
17
- （メニューとコンテンツをセットにしたのはある目的があるため）
23
+
18
-
19
- この構成は1フレームで子ページを切替たときにBGMを止めないためです。
24
+
20
-
21
- 　全体の動きは－－－－－
22
-
23
- 親ページを起動したときはインフレーにメニューと更新情報を表示します。
24
-
25
- メニューを選択すると選択された子ページをインフレームに表示します。
26
-
27
- 　リンクの方法は－－－－－
28
-
29
- リンクの方法は親ページと子ページとも同じ方法です。（あえてしました）
30
-
31
- 　親ページの<ifremeのsrc=""に子ページURLを設定します。
32
-
33
- 親ページを起動したときは<body onlardで関数を引数(子ページファイル名)で呼出し
34
-
35
- 　子ページURL ＝ googleベースURL + 子ページファイル名
36
-
37
- 　document.getElementById('ifrmencont').src = 子ページURL
38
-
39
- 　で親ページの<ifremeのsrc=""に更新情報の子ページURLを設定します。
40
-
41
- 子ページでメニューを選択したときは関数を引数(子ページファイル名)で呼出し
42
-
43
- 　子ページURL ＝ googleベースURL + 子ページファイル名
44
-
45
- 　window.frameElement.src = 子ページURL
46
-
47
- 　で親ページの<ifremeのsrc=""にメニューで選択した子ページURLを設定します。
48
-
49
- つまり親の<ifremeのsrc=""のsrcを書換る点で同じ方法になります。
50
-
51
- 　最初のテストの結果は－－－－－
52
-
53
- まず最初に親ページと最初に表示する子ページをGASに移植してテストしました。
54
-
55
- それで問題点が2つ生じましたが解決できずテラテイルの的確な回答で無事解決できました。
56
-
57
- 次にメニューで選択する子ページを一つGASに追加してテストしました。
58
-
59
-
60
-
61
- ```
25
+ ```
26
+
27
+
62
28
 
63
29
  ### 発生している問題・エラーメッセージ
64
30
 
65
31
 
66
32
 
67
- ```
33
+ ```ここに言語を入力
68
-
34
+
69
- 　その結果ですがここからが問題点－－－－－
35
+ 問題点（➀と➁は以後共通）
70
-
36
+
71
- １.親ページからのリンクは正常に子ページを表示します。（初めに起動したとき）
37
+ 　➀親ページを表示するとインフレームに指定された子ページを表示します。
38
+
72
-
39
+ 　（ここまで問題がありましたがテラテイルの力を借りて解決しました）
40
+
73
- 　doGet関数に問題ありません。
41
+ ここからが今回の問題点です。
74
-
42
+
75
- ２.子ページからのリンクは正常に子ページを表示できません。（メニュー選択したとき）
43
+ 　➁メニューを選択すると選択した子ページをインフレームに表示します。
76
-
44
+
77
- 　doGet関数に問題ありません。（1項と同じでファイル名が違うだけ）
45
+ しかし➀はOKですが➁はNGです。
78
-
46
+
79
- 表示されないでなく真白に表示されたのですが原因がありました。
47
+ ➁はインフレームが真白になってgoogleのエラー表示もありません。
80
-
48
+
81
- 　分かったこと－－－－－
49
+ デベロッパーのコンソールでエラーを見ると
50
+
82
-
51
+ 　Uncaught TypeError: Cannot read property 'children' of undefined
52
+
83
- 使い慣れないchromeのデベロッパー（F12)を使い送信されたソースを確認しました。
53
+ 　 at HTMLDocument.changeFontSize (script.js:37)
84
-
54
+
85
- 驚きました。GASは元のHTMLを加工して送る事は知っていましたがまさかこんなにとは。
55
+ で、実際GASのエディターで見ても同じエラーが出ていました。
86
-
56
+
87
- とにかく巨大化しています。スレッドを開いても開いても目的のソースが見当たりません。
57
+ リンク方法は
88
-
58
+
89
- それでエレメントで選択してようやく見つけました。説明が長くなるので結論だけにしますが。
59
+ 子ページへのリンクは➀と➁の2つありますが現在どちらも同じにしています、
60
+
90
-
61
+ 　➀<body onloadで呼ばれる関数のdocument.getElementById('ifrmencont').src = URLで
62
+
91
- 親ページの<ifremeのsrc=""を確認したら間違いなく書換されていました。
63
+ 　　　親ページの<iframe src=""にURLを設定しています。
64
+
92
-
65
+ 　➁メニュー選択で呼ばれる関数のwindow.frameElement.src = URLで
66
+
93
- 表示されない方の<html>にはccsもscriptもhtmlも全く記述されていません。
67
+ 　　　親ページの<iframe src=""にURLを設定しています。
94
-
95
- これでは表示しても真白になるはずです。結果的に送られたHTMLがおかしかったのです。
68
+
96
-
97
- また分かりませんが<script>にccsとscriptとhtmlが詰まった状態で記述されていました。？
98
-
99
- これは表示される方も同じなのでこれが問題だとは思われません。
69
+ 結果的に全く同じですがなぜか動作が違います。```
100
-
101
- また全体のインデントのブロック数が違い表示されない方は1ブロック多いようです。
70
+
102
-
103
- chromeのコンソールでエラーを見ましたが通常みられるもの以外はありませんでした。
71
+
104
-
105
-
106
-
107
- 追伸
72
+
108
-
109
- 　良かれと思って長々と説明しましたがかえって分かりずらいかも知れません。
110
-
111
- 　簡単に説明すると
112
-
113
- 親ページを表示したときに最初にインフレームに子ページを表示するときと
114
-
115
- インフレームのメニューを選択してその子ページをインフレームに表示する
116
-
117
- ためのリンクの方法が同じなのに、メニューを選択したときは表示されないのが問題です。
118
-
119
- 　よろしくお願いします。
120
-
121
- ```
73
+ ``````
122
-
123
-
124
74
 
125
75
  ### 該当のソースコード
126
76
 
127
77
 
128
78
 
129
- ```ここに言語名を入力
79
+ ```ここに言語を入力
80
+
81
+ ```ここに言語を入力
82
+
83
+
130
84
 
131
85
  -----親ページのソースコード(index)
132
86
 
@@ -374,6 +328,10 @@
374
328
 
375
329
 
376
330
 
331
+
332
+
333
+ ```
334
+
377
335
  ```
378
336
 
379
337
 
@@ -382,35 +340,49 @@
382
340
 
383
341
 
384
342
 
343
+
344
+
345
+
346
+
385
- ```ここに言語を入力
347
+ ```ここに言語を入力
386
-
348
+
387
- 　試したこと－－－－－
349
+ ```ここに言語を入力
388
-
350
+
389
- ただメニューで選択したファイル自体はまだ未確認なので、確認済の更新情報に変更して比較しました。
351
+ 調べたこと--------------------------------------------------------
390
-
391
- やはりメニューで選択すると真白になります。確認するとやはりソースが空でした。
352
+
392
-
393
- 同じファイルなのでファイルの問題ではないように思います。
394
-
395
- 同じファイルを同じ方法で（子ページでからではなく親ページから）リンクしているのになぜか。
353
+ 1.リンク方法を親ページからでなく直接子ページからリンクする方法を試しました。
396
-
397
- なお子ページからのリンクは
354
+
398
-
399
- 　➀ もともとはlocation.href = praURL でしたがこの結果と同じでした。
355
+ 　　location.href = URL
400
-
401
- 　➁ window.parent.document.getElementById('iframeのid').src = praURL に変更するとコードエラーになります。
356
+
402
-
403
- 　　（これも疑問ですが）
357
+ ですが➁と同じく真白になります。
358
+
404
-
359
+ 2.そこで➁の状態でデベロッパー（F12)でソースを確認しました。
360
+
361
+ GASのソースはあまりにも巨大で自分のソースが見当たりません。
362
+
405
- 　➂ Webで調べて見つけたwindow.frameElement.src = praURL でリンクするとエラーはなく正常リンクしてこの結果です。
363
+ Elementsでインフレームを選択して<html>を見ると何とソースが空でした。
406
-
364
+
407
- 　　（デベロッパーで見ると親の<ifremeのsrc=""のsrcはpraURLに書換っています）
365
+ 親ページの<iframe src=""はメニューで選択したURLに書換られてます
366
+
408
-
367
+ 比較のため➀と➁を同じファイルにしてGASのソースを比較しました。
368
+
369
+ 同じように見えますが➁はインデントのブロックが1つ多くなっています。
370
+
371
+ これでは読込でも何も表示できません、
372
+
373
+ リンク方法もdoGet関数も全く同じでなぜこうなるのか。
374
+
409
- 私にはもう限界です。何か思い違いがあるかもしれません。何が悪いのか宜しくお願いします。
375
+ 何か思い違いがあるかもしれません。何が悪いのか宜しくお願いします。
410
-
411
-
412
-
376
+
377
+
378
+
413
- ```
379
+ ```
380
+
381
+ ```
382
+
383
+
384
+
385
+
414
386
 
415
387
 
416
388
 

5

追伸

2019/01/18 15:13

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
@@ -104,7 +104,19 @@
104
104
 
105
105
 
106
106
 
107
-
107
+ 追伸
108
+
109
+ 　良かれと思って長々と説明しましたがかえって分かりずらいかも知れません。
110
+
111
+ 　簡単に説明すると
112
+
113
+ 親ページを表示したときに最初にインフレームに子ページを表示するときと
114
+
115
+ インフレームのメニューを選択してその子ページをインフレームに表示する
116
+
117
+ ためのリンクの方法が同じなのに、メニューを選択したときは表示されないのが問題です。
118
+
119
+ 　よろしくお願いします。
108
120
 
109
121
  ```
110
122
 

4

コード修正

2019/01/17 18:12

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
@@ -386,7 +386,7 @@
386
386
 
387
387
  　➀ もともとはlocation.href = praURL でしたがこの結果と同じでした。
388
388
 
389
- 　➁ window.parent.document.getElementsById('iframeのid').src = praURL に変更するとコードエラーになります。
389
+ 　➁ window.parent.document.getElementById('iframeのid').src = praURL に変更するとコードエラーになります。
390
390
 
391
391
  　　（これも疑問ですが）
392
392
 

3

コード修正

2019/01/17 12:35

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
@@ -254,7 +254,7 @@
254
254
 
255
255
  // location.href = praURL; //子ページから直接読込
256
256
 
257
- // window.parent.document.getElementsById('ifrmencont').src = praURL; //iframeのsrcに設定:エラーになる
257
+ // window.parent.document.getElementById('ifrmencont').src = praURL; //iframeのsrcに設定:エラーになる
258
258
 
259
259
  window.frameElement.src = praURL; //親ページから関節読込（iframeのsrcに設定）
260
260
 

2

語句の間違いを修正

2019/01/17 12:33

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  　その結果ですがここからが問題点－－－－－
70
70
 
71
- １.親ページはからのリンクは正常に子ページを表示します。（初めに起動したとき）
71
+ １.親ページからのリンクは正常に子ページを表示します。（初めに起動したとき）
72
72
 
73
73
  　doGet関数に問題ありません。
74
74
 

1

タグを追加

2019/01/17 12:15

投稿

yotuya
yotuya

スコア17

test CHANGED
File without changes
test CHANGED
File without changes