Q&A
質問内容がいまいち理解できないです。
これは「iframeのsrcを新しいurlに書き換えたが、そのurlのコンテンツが表示されない」という意味でしょうか？質問がその意味合いならこのサイトが参考になるかと思います。https://qiita.com/nntsugu/items/640762a7ba8fd7cc50dd
"iframeの中身を差し替えたい場合は、location.srcを書き換えてlocation.reloadしてもダメ。
location.replaceしましょう。"
前提・実現したいこと
質問に対しテラテイルから編集してはと連絡があり簡潔に編集しました。 ローカルで使用していた備忘録をGASに移植しました。 全体の構成 一つの親ページとメニューで選択される複数の子ページがあります。 親ページにはページの表題とBGMのコントローラとインフレームがあります。 子ページにはコンテンツの選択メニューとコンテンツがセットで複数あります。 インフレームには複数ある子ページをメニューで選択して表示します。
発生している問題・エラーメッセージ
問題点（➀と➁は以後共通） ➀親ページを表示するとインフレームに指定された子ページを表示します。 （ここまで問題がありましたがテラテイルの力を借りて解決しました） ここからが今回の問題点です。 ➁メニューを選択すると選択した子ページをインフレームに表示します。 しかし➀はOKですが➁はNGです。 ➁はインフレームが真白になってgoogleのエラー表示もありません。 デベロッパーのコンソールでエラーを見ると Uncaught TypeError: Cannot read property 'children' of undefined at HTMLDocument.changeFontSize (script.js:37) で、実際GASのエディターで見ても同じエラーが出ていました。 リンク方法は 子ページへのリンクは➀と➁の2つありますが現在どちらも同じにしています、 ➀<body onloadで呼ばれる関数のdocument.getElementById('ifrmencont').src = URLで 親ページの<iframe src=""にURLを設定しています。 ➁メニュー選択で呼ばれる関数のwindow.frameElement.src = URLで 親ページの<iframe src=""にURLを設定しています。 結果的に全く同じですがなぜか動作が違います。```
該当のソースコード
```ここに言語を入力 -----親ページのソースコード(index) <!DOCTYPE html> <html> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile('Css').getContent(); ?> <!-- css読込 --> </head> <audio id="audio"></audio> <script type="text/javascript"> | BGMコントローラの操作で省略 | //子ページ読込 function openURL(url) { var gglURL = "https://script.google.com/macros/s/AKfycbxQOayD1oYR8kFXeFRHSzlXMJSicQvQdEvVA0yJ_SiRydfPmr2B/exec?p="; //googleベースURL var praURL = gglURL + url; //ファイル名のパラメータ追加 document.getElementById('ifrmencont').src = praURL; //iframeのsrcに設定 //googleメッセージ消去テスト中 var removeElem = document.getElementsByTagName("tr")[0]; //最初のtr要素取得（現在取得できない） alert(removeElem); //エラー確認用（現在undefined） removeElem.parentNode.removeChild(removeElem); //要素削除（現在取得できないのでエラー） } </script> <body onload="openURL('kousin')"> <div id="hyobgmwak"> <div id="hyowak"> <div id="kamon"> <img src="https://drive.google.com/uc?id=16GtqNtZEuxq6N_xi-f50brhIKySeAI1I" alt="〇〇〇家の家紋" width="55" height="55"> </div> <div id="taitl"> <h1>〇 〇 〇 家 の 備 忘 録</h1> <p>〇〇〇藤三郎の備忘録をもとに〇〇〇晃の備忘録を追加</p> </div> </div> <div id="bgmwak"> <div id="btndsp"> <button id="foldsel" onClick="ongpasget()"><b>選</b></button> <input type="file" webkitdirectory directory multiple onChange="ongfileListDirectory(this.files)" id="ongfilselct" style="display:none;"> <button id="ongfldbtn" onClick="ongfldsel()">―</button> <button id="playstrt" onClick="lisnkai()">―</button> <button id="playstop" onClick="lisntei()"><b>停</b></button> <button id="playback" onClick="ongmodoru()">―</button> <button onClick="ongvoludai()"><b>▲</b></button> <button onClick="ongvolusyo()"><b>▼</b></button> </div> <div id="ongpas"> folder未選択 </div> <canvas id="canvs" width="160" height="2"></canvas> </div> </div> <div id="iframewak"> <iframe id="ifrmencont" name="ifram" src="" frameborder="0" scrolling="no"></iframe> </div> </body> </html> -----子ページのソースコード(kousin分) <!DOCTYPE html> <html lang="ja"> <head> <base target="_top"> <?!= HtmlService.createHtmlOutputFromFile('Css').getContent(); ?> <!-- css読込 --> </head> <script type="text/javascript"> function openURL(url) { var gglURL = "https://script.google.com/macros/s/AKfycbxQOayD1oYR8kFXeFRHSzlXMJSicQvQdEvVA0yJ_SiRydfPmr2B/exec?p="; //googleベースURL var praURL = gglURL + url; //ファイル名のパラメータ追加 // location.href = praURL; //子ページから直接読込 // window.parent.document.getElementById('ifrmencont').src = praURL; //iframeのsrcに設定:エラーになる window.frameElement.src = praURL; //親ページから関節読込（iframeのsrcに設定） } </script> <body> <div id="menconwak"> <div id="menuwaku"> <ul> <li class="midasi">家系図</li> <li><button class="lnkbar" onclick="openURL('YotuKakeizu')">〇〇〇家</button></li> <li><button class="lnkbar" onclick="openURL('AbeKakeizu')"✕✕家</button></li> | 他のメニュー | <li><button class="lnkbar" onclick="openURL('Help')"><b>操作説明</b></button></li> </ul> </div> <div id="contwaku"> <div id="content"> <h2>更新履歴</h2> <br> <p id="rireki"> | 更新履歴内容 | </p> </div> </div> </div> </body> </html> -----doGet関数のソースコード function doGet(e){ var page = e.parameter["p"]; if(page == "index" || page == null){ var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate(); return htmlOutput; } else if(page == "kousin"){ var htmloutput = HtmlService.createTemplateFromFile('kousin').evaluate(); htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); return htmloutput; } else if(page == "YotuKakeizu"){ var htmloutput = HtmlService.createTemplateFromFile('YotuKakeizu').evaluate(); htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); return htmloutput; } | メニュー分 | }
### 試したこと ```ここに言語を入力 ```ここに言語を入力 調べたこと-------------------------------------------------------- 1.リンク方法を親ページからでなく直接子ページからリンクする方法を試しました。 location.href = URL ですが➁と同じく真白になります。 2.そこで➁の状態でデベロッパー（F12)でソースを確認しました。 GASのソースはあまりにも巨大で自分のソースが見当たりません。 Elementsでインフレームを選択して<html>を見ると何とソースが空でした。 親ページの<iframe src=""はメニューで選択したURLに書換られてます 比較のため➀と➁を同じファイルにしてGASのソースを比較しました。 同じように見えますが➁はインデントのブロックが1つ多くなっています。 これでは読込でも何も表示できません、 リンク方法もdoGet関数も全く同じでなぜこうなるのか。 何か思い違いがあるかもしれません。何が悪いのか宜しくお願いします。
### 補足情報（FW/ツールのバージョンなど） 使用ブラウザはchromeの最新バージョン。 開発はGooglrDriveのScriptEdter。
目に縮めていただきありがとうございます。前回の回答ありがとうございました。おかげさまでBGMが聞くことができ、インフレームに子ページを表示することができました。
次に挑戦したのは子ページにあるメニューで選択したページを、同じインフレームに表示する事です。
その時に起きた問題が今回の質問です。
>これは「iframeのsrcを新しいurlに書き換えたが、そのurlのコンテンツが表示されない」という意味でしょうか？
その通りです。同じリンク方法なのに帰ってきたソースには、私のHTMLソースが記述されていません。
紹介のサイトを参考に試してみます。
追伸
他にも画像と音楽を同時スライドするHTMLもGAS化したのですが行き詰っていました。でも前回の回答で画像も表示できるようになりました。サーバー起動なので使いかってが本当によくなりました。ありがとうございました。
早速紹介のサイトを参考に試してみました。
iframeに子ページを表示するscriptは
window.frameElement.contentDocument.location.replace(praURL);で
praURLはGASのベースURL+表示ファイル名のパラメータです。
window.frameElementにしたのは
Window.parent.document.getElementById('ifrmencont')[0]または
Window.parent.document.getElementById('ifrmencont')では
scriptErroになるため、最初に使っていたframeElementにしました。
その結果は読込んでいますがインフレームは真白になります。
window.location.replace(praURL);
でも試しましたが同じです。
F12で調べると以前と同じく表示するHTMLが空です。
ただ<scriptタグの中にcssとscriptとbodyソースが押し込まれています。
だから読込んでいるのにHTMLが空なので表示できないと思います。
検索キーワードが分かったので調べていますが解決には至りません。
window.openのウィンドウでは<a href=で切替表示できますが、
iframeでは出ないgoogleメッセージが出てしまいます。
DOM操作でそれを表示する要素を削除しようとしましたが、
削除できません。googleが保護しているのでしょうか。
これが解決できればwindow.openでもいいのですが。
何か間違いがあるでしょうか？。
回答2件
0
ベストアンサー
試してみました。やりたいことは以下のような事ですか？
GoogleAppScript
1function doGet(e){ 2 var page = e.parameter["p"]; 3 if(page == "index" || page == null){ 4 var htmlOutput = HtmlService.createTemplateFromFile("index.html").evaluate(); 5 return htmlOutput; 6 } 7 else if(page == "a"){ 8 var htmloutput = HtmlService.createTemplateFromFile('a.html').evaluate(); 9 htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 10 return htmloutput; 11 } 12 else if(page == "b"){ 13 var htmloutput = HtmlService.createTemplateFromFile('b.html').evaluate(); 14 htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 15 return htmloutput; 16 } 17}
html
1ファイル名：index.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body onload="openURL('a')"> 9 index 10 <div> 11 <ul> 12 <li><button onclick="openURL('a')">a</button></li> 13 <li><button onclick="openURL('b')">b</button></li> 14 </ul> 15 </div> 16 <iframe id="ifrmencont" name="ifram" src="" frameborder="0" scrolling="no"></iframe> 17 <script type="text/javascript"> 18 function openURL(url) { 19 var gglURL = "https://script.google.com/macros/s/AKfycbwyzkUAatP4KABhkXs7zn0SIwFMfrdJ9GEWokWhv-11ySHR191N/exec?p="; //googleベースURL 20 var praURL = gglURL + url; //ファイル名のパラメータ追加 21 document.getElementById('ifrmencont').src = praURL; //iframeのsrcに設定 22 document.getElementById('ifrmencont').contentWindow.location.replace(praURL); 23 console.log(praURL); 24 } 25 </script> 26 </body> 27</html> 28
html
1ファイル名：a.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body> 9 aaa 10 </body> 11</html> 12
html
1ファイル名：b.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body> 9 bbb 10 </body> 11</html> 12
補足:location.replaceはあってもなくても動作が一緒でした。（ボタンをおすごとにiframeの内容が切り替わる）
回答追加 1/29 12:30
子要素から親要素を編集したいということでしたので修正しました。
GoogleAppScript
1ファイル名：コード.gs 2 3function doGet(e){ 4 var page = e.parameter["p"]; 5 if(page == "index" || page == null){ 6 var htmlOutput = HtmlService.createTemplateFromFile("index.html").evaluate(); 7 return htmlOutput; 8 } 9 else if(page == "a"){ 10 var htmloutput = HtmlService.createTemplateFromFile('a.html').evaluate(); 11 htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 12 return htmloutput; 13 } 14 else if(page == "b"){ 15 var htmloutput = HtmlService.createTemplateFromFile('b.html').evaluate(); 16 htmloutput.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); 17 return htmloutput; 18 } 19}
html
1ファイル名：index.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body> 9 index 10 11 <iframe id="ifrmencont" src="https://script.google.com/macros/s/AKfycbwyzkUAatP4KABhkXs7zn0SIwFMfrdJ9GEWokWhv-11ySHR191N/exec?p=a" frameborder="0" scrolling="no"></iframe> 12 </body> 13</html> 14
html
1ファイル名：a.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body> 9 aaaaaaaaaaaaaaa 10 <div> 11 menu 12 <ul> 13 <li><button onclick="openUrl('a')">ページa</button></li> 14 <li><button onclick="openUrl('b')">ページb</button></li> 15 </ul> 16 </div> 17 <script> 18 function openUrl(param){ 19 var ifrmencont = window.parent.parent.parent.document.getElementById('ifrmencont'); 20 console.log(ifrmencont); 21 ifrmencont.src = 'https://script.google.com/macros/s/AKfycbwyzkUAatP4KABhkXs7zn0SIwFMfrdJ9GEWokWhv-11ySHR191N/exec?p=' + param; 22 } 23 </script> 24 </body> 25</html>
html
1ファイル名：b.html 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <base target="_top"> 7 </head> 8 <body> 9 bbbbbbbbbbbbbbb 10 <div> 11 menu 12 <ul> 13 <li><button onclick="openUrl('a')">ページa</button></li> 14 <li><button onclick="openUrl('b')">ページb</button></li> 15 </ul> 16 </div> 17 <script> 18 function openUrl(param){ 19 var ifrmencont = window.parent.parent.parent.document.getElementById('ifrmencont'); 20 console.log(ifrmencont); 21 ifrmencont.src = 'https://script.google.com/macros/s/AKfycbwyzkUAatP4KABhkXs7zn0SIwFMfrdJ9GEWokWhv-11ySHR191N/exec?p=' + param; 22 } 23 </script> 24 </body> 25</html> 26
回答追加 1/29 15:30
「なぜparentが三つなのか？」
chromeブラウザの検証ツールで確認できます。
実際に見てみるとiframeが何重にもなっているのが分かります。
投稿2019/01/25 11:32
編集2019/01/29 06:30退会済みユーザー
総合スコア0
最初の回答を参考にWebでさらに調べて、location.replaceを試しましたが、私の力不足もあり未解決です。
ただ解決はできなけど私にできる回避策はないか考え試していました。構造の変更もしていました。そのためメールを見る暇もなく返事が遅くなり申し訳ありません。
>やりたいことは以下のような事ですか？
ほぼ同じですがメニューの位置が違います。回答のソースを例に説明します。
ファイルの構成はindex,a,bの通りです。ただindexにはメニューがありません。
メニューはaとbにありコンテンツとセットになっています。
一般的ではありませんがある機能を実現するためです。
indexを起動するとiframeにaを表示します。（indexのsrc=に設定）
aのメニューbを選択するとinframにbを表示します。（bからindexのsrc=を書換）
のはずですがiframeは真白になりError表示はありません。
bのリンク方法はwindow.frameElementでindexのiframeのsrc=を書換えています。
Window.parent.document.getElementById()はなぜかErrorになります。
chomeのデベロッパーで見るとiframeの<html> </html>の中は空っぽです。
ただ<script> </script>にはcss,script,htmlが羅列されてErrorもないので読込まれています。
現在はある機能を諦めindexにメニューを戻すように変更中です。
これに合わせて最初にpassword確認をするように追加しました。
passwordを確認してindexとaを表示するようにします。
indexを単体で起動すると間違いなくiframeにaを表示します。
しかしpassword確認してからindexを起動するとaは真白です。
password確認ページとindexページは完全な置換です。
なぜか同じような現象が発生してしまいます。
iframeの代わりにwindow.openにすると表示されますが、googleメッセージが出るので駄目です。
Webで記事を検索するとブラウザの違いやサーバーの違いなど我々には難しすぎます。
ある機能は残したいので現状で解決したいです。宜しくお願いします。
回答を追加しました。
今aとbのメニューを分離してindexに戻す作業が終わり動作確認したところです。ただローカルで動作確認してGASでだめなのは腑に落ちません。メールを確認し回答の追加を見ました。
Webのサンプルでは子から親の制御が簡単にできる記事が多いのですが、
いざやってみると分からない何かでエラーになりはまっていました。
唯一エラーにならないwindow.frameElementでindexのsrcを書換えていました。でも表示はできません。
window.parent.parent.parent.document.getElementById();で
parentが3個でOKになるんですね。今まで１個しか見たことがありません。
早速修正して試してみます。もしよろしければなぜparentが3個なのか教えていただければ幸いです。試験結果は報告します。
回答欄に追記しました。
ありがとうございます。私もあれを見てなんでこんなにと思いましたが。そうゆうことなんですね。
調査中にあれを見て気が付きましたが表示される方は２重で表示されない方は３重なんです。
その３重目のiframeの中に空の<html></html>があるんです。そして<script>にはcss,script,htmが縮尺されてはいっています。なんだかわかりません。もう少し休んでから試してみます。
思うに子から親を操作してリンクしてもサーバーはトリガの位置が分かるのでしょうか？。
> 思うに子から親を操作してリンクしてもサーバーはトリガの位置が分かるのでしょうか？。
質問内容がよくわからないです。
DOMを操作するのはブラウザなのでサーバーは関係ないと思います。
ようやく落ち着き.parent.parent.parentのテストしました。
window.parent.parent.parent.document.getElementById('ifrme').src = gasurl;
ですが駄目でした。.parentを減らしてみましたが駄目です。
この行の下にalert("OK");を追加しましたが表示されません。
多分コードがエラーと解釈されて実行できないようです。
以前にHTMLをローカルで起動したとき、子から親の制御はどうしても駄目でした。
エディタのBracketsからブラウザを起動したときは制御できていました。
アドレス欄を見るとファイルでなくHTTPのアドレスになっていました。
だからサーバーからの起動ではコード通りに動くと理解していました。
関数の実行を含めWebで検索しいろいろ試しましたが駄目でした。
今回の問題の中でもただ唯一エラーがでないで実行されたのは
window.frameElement.src = url;
location.href = url;
の二つだけです。間違いなくリンクしてブラウザに読込まれています。
しかしそこには表示すべきcss,script.htmが消えています。
表示されないのではなく表示したら真白になると解釈しています。
以下は素人の考えですが
GASはiframeに特別な仕掛けをしているのではないか（操作禁止）、
だからiframeにはGoogleのメッセージを表示する必要がない。
と考えてしまいます。
そうでなければ一般のサーバーで表示しているWebページで、
子から親を操作するサンプルが動くはずがありません。
また親ページで子ページを切替える方法と同じ方法を、
子ページから制御して切替できないわけがありません。
もしGASの仕様であれば諦めるしかありません。
おかげさまで備忘録はメニューを親ページに戻しましたが
画像音楽スライダーを含めGASに移植することができました。
これでメンテが楽になり操作も便利になりました。
タブレットでもWebページから使えます。
password確認後でiframeに表示できない問題は、
起動ページの起動画面にpassword画面を追加し、
ページ内で表示と非表示を切替えて対処しようと思います。
心残りですが子ページから子ページの切替は諦めます。
無駄な時間を取らせたと思います。お詫びします。
長らくお付き合いいただきありがとうございました。
うまくいかないGASは公開できますか？
もしかしたらどう参照すればいいかぐらいはアドバイスできるかもしれません。（単純にhtmlの構造をデベロッパーツールで見るだけなので）
ソースではなく公開しているページを見てみたいという意味です。
>うまくいかないGASは公開できますか？
これについては以下で解決しています。
iframeの表示については、やむなくメニューをindexに戻して解決しています。
パスワード確認後のifameの表示については、パスワード確認ページをindexに内包して解決しました。
ですので自分では完成したと思っています。
これは親父と私の備忘録なので個人情報が入っています。だから公開といっても家族や親戚だけです。
それとタブレットにHTMファイルを置かなくてもWebで見るためです。
ですので最初にパスワードで確認をします。デベロッパーで見ても簡単には分からないように細工はしています。
>もしかしたらどう参照すればいいかぐらいはアドバイスできるかもしれません。
については大変ありがたいお言葉です。ありがたく頂戴いたします。
でも申し訳ありませんがパスワードは教えられません。
最後にiframeに表示するページになぜメニューを置いたのか疑問だと思います。
変則的です。それは前にも述べたある機能のためです。その機能とは
これからの説明はindexにメニューがありコンテンツがiframeにある場合です。
私は今年の５月に78才になります。だからメニューで選択したコンテンツを見ていると、
どのメニューだったかを忘れてしまいます。それで選択したメニューを強調表示しています。
これはメニューがindexの中なら簡単にscriptで実現できます。
もう一つiframeに表示するコンテンツの中には参照ボタンがあります。
このボタンでも参照するコンテンツを見れます(メニュー選択と同じ）。
この時は特に参照したメニューを強調表示がしたかったのです。
このころはローカル起動でしたので子から親の制御はできませんでした。
ここからはiframeにメニューとコンテンツを表示する説明です。
そこで考えたのが強調表示したメニューとコンテンツを一緒に表示することです。
何の仕掛けもない解決方法でしたがメニュー選択も参照選択も強調表示できました。
これはこれで問題はなかったのですがこの備忘録にはBGM再生機能もあります。
ところがローカル起動のため音楽フォルダがHTMLと同階層にないとアクセスできません。
そこでHTMLファイルを音楽フォルダに置きましたがサブフォルダがアクセスできません。
そこで無料のGASに移植することを考えました。それと親戚に公開できると思いました。
NETACHILさんのおかげで最初のiframe表示と音楽ファイルの再生は解決できました。
ところがどう考えてもGASサーバーは普通のサーバーとは違うように感じます。
GASは苦労が多く苦手です。また各ファイルは数Kですがiframeに表示速度が遅いです。
画面の切替時に真白な画面が１秒弱あります。回線速度は100M程度はあるのですが。
最後にURLを紹介します。もしパスワードが解けたら連絡ください。お待ちしています。
私の発想ですから簡単に解けるかもしれません。でももう少し分かりづらくしようかな。
公開したら連絡します。
https://script.google.com/macros/s/AKfycbzT19RLYEbxU0LNST5dyBe4GswPCfyQ38EVvHEovLU/dev
いえ、そのような事情であれば公開しなくて良いです。
あとこの質問は自己解決されたとのことなので回答欄に解決した方法を記載して自己解決ボタンを押しておいてください。（質問をクローズしないと他の人が別の回答を記載することになるので）
分かりました。
でもパスワードについては重要でないこんな一般のページを、
デベロッパーで解析してパスワードを探る人はいないでしょう。
だからこの備忘録を息子にも見せたいので公開します。
また私の考えの押し付けになりますが、
GASでも複数のページの画面偏移がdoGet関数で実現できます。ただ表示先がiframeなら
setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);が必要です。
しかし表示先がiframeでなければ必要ありません。indexと同じです。
多分一般のサーバーでは何処に表示するか指定すればは同じだと思います。
GASでwindow.openを使ったときはsetXFrameOptionsModeは必要なくリンクできます。
その代わりiframeには出ない邪魔になるgoogleメッセージが出ます。
GASがiframeに制限をかけるためにsetXFrameOptionsModeがあるのではと考えます。
だから唯一動作するwindow.frameElement.src = url;で親からリンクすると、
読込まれますがiframeの部分が空になっていると思います。
これはiframeにメニューとコンテンツの表示を諦める理由付けかもしれません。
考えると問題解決ではなく問題回避でした。そのことを含めて自己解決欄に投稿します。
真夜中というか朝早くというか私と同じですね。朝早くからありがとうございました。
・NETACHILさん大変申し訳ないことをしました。心からお詫び申し上げます。
今回の問題は回答を頂きながら解決できず、GASを悪者にして回避策で逃げたことを、心から悔やんでいます。
・今日は回答を頂きながら解決できず回避策でGAS化を解決したことを投稿しました。それでもまだ諦めきれづなぜだろうと考えていました。そこでもう一度1/29の回答の内容を確認しました。
・この回答を頂いたときはsrcを書換る部分だけをコピペして確認しましたが駄目でした。今日もう一度見直したときに動かないソースを載せるわけがないと思い、部分修正でなくサンプルをそのままコピペしてGASで実行しました。何とメニュー選択でiframeに表示されました。と同時にNETACHILさんに申しわけないの思いが強くなりました。
・最初は画面構成が違うのでピンときませんでしたが、まさしく私が求めていた方法が実現できました。確かに正解でした。しかしsrcの書換だけの部部修正では駄目でしたが、たぶんこのころは試行錯誤でソースがぐちゃぐちゃになり悪影響が出たと思います。初めて見ましたがparentの回数が鍵だったんですね。やはり方法はあるんですね。
・そこで思い出したのが音楽ファイルの再生問題で、やはり回答の再生部分だけを修正してだめだったことです。あの時は初心に戻り、回答のソースにファイル情報の取得ルーチンを追加していく過程で原因が分かりました。なので今回も回答のサンプル少しづつ追加していき、どこでおかしくなるか切り分けようと思います。CSSはできているのでスムーズにいくと思います。ベストアンサーに選べるように頑張ります。自己解決した後でも選択できますよね。本当に申し訳ありませんでした。心からお詫び申し上げます。そして私の質問やコメントは逆効果でした。これからは問題と結果を簡潔にまとめます。内容が理解できなければその旨のコメントを出してもらう。これで行こうと思います。
> なので今回も回答のサンプル少しづつ追加していき、どこでおかしくなるか切り分けようと思います。
そうですね。プログラミングはそういった地道な作業が大事だと思います。次からは問題が発生したら、問題部分に特化した（他の機能は全て省いた）最小構成のサンプルコード作成に取り組むようにしてください。そして、そのサンプルコードが動かなかった時にteratailで「サンプルコードが動かない」と質問するようにしてください。それはpapinianusさんの言う「問題の限定・抽象化」に繋がることです。ソースに余計な部分がないので読みやすく、質問内容が理解されやすいと思います。
作業は進んでほぼ終わる手前ですが、作業中にふっとひらめきました。
parent×3で子ページから親ページの関数を実行できるのではないか。
期待に胸膨らませ試したところ見事に実行することができました。
これなら子の参照ボタンから親のメニューの強調表示ができます。
作業は中止してメニューをindexに戻したプロジェクトに戻ります。
修正の必要な５ファイルに参照ボタンと関数実行を追加するだけです。
今後メニューの追加は楽になり子ページのソースもスッキリします。
これは完全な解決です。ベストアンサーを差し上げたく問合せ中です。
これで開発当初から考えていた構成で備忘録が完成します。
BGMを聴きながら家族写真や誕生からの記録を見ることができます。
ありがとうございました。
ただgoogleのEdterでコンテンツのメンテはチョットきついですね。
結果的にはメニューはindexに戻しましたが、a,bからのメニュー選択（参照リンク）とメニュー名の強調表示が可能になりました。自己解決の取消方法が分かりましたので、ベストアンサーとすることができました。ありがとうございました。
0
投稿した後に回答で無事解決したので削除しました。
投稿2019/01/31 05:01
編集2019/02/04 09:14総合スコア17
> この質問の閲覧者が大勢いるのは同じような問題を抱えている人が大勢いるということだと思います
ビュワーとしてコメントします。要約されるのを待っていました。
特殊・具体的な方向に深化するほど、質問は特定の質問者様の個人的な問題に帰着し、そのモノを見せてください、みたいな話にしかなりませんし、それではGASの顧客サポートです。
もっと問題を限定・抽象化して、「他の同じ問題で困っていそうな人」が出てくるレベルにしていただかないと、teratailでは回答はつきにくいと思います。この点、NETACHIL様の最初のコメント「質問内容がいまいち理解できないです」に尽きています。
目的に対するアプローチで考えますと。
GASがwebサーバとして特殊である、GETのターンアラウンドタイムが長いはそのとおりで、特有の苦労をするに値しないものであれば、他のサーバをかりたり、個人用途なら自宅PCをサーバ公開してもいいはず(今どき、ルータの機能でVPNができたりするので)です。
(あくまで見解であって、批判の意図はないです)
・確か以前にもコメントがありましたね。見解ありがとうございます。テラテイルをはじめWebに質問したのは初めてです。だからといって言い訳はしませんが。自分としては少しでも理解しやすいようにと思って、ついつい説明が多く長くなってしまいました。でもNETACHIL様とpapinianus様のご指摘のように、自分でも論点が分かりずらくなっているなと感じていました。逆効果ですね。それと不確かな自分の見解も不要ですね。この点を踏まえてこれからもテラテイルの力を借りたいと思います。宜しくお願いします。
・またサーバーについては、以前に作成したHTMLのローカル起動に満足できづ、WindowsのIISを考たこともありましたが、いまだに実現できずにGASを利用しました。でもIIS以外にもPCをサーバーにするソフトはあり、chromeの拡張機能でも実現できるようなので考えてみます。私が作るWebアプリケーションは小さなツール系なので疑似サーバーで十分です。後押しになりました。ありがとうございます。
あなたの回答
tips
プレビュー
