Safariでの onload="getData()" の挙動について

Question

当方Javascript初心者です。一度サイトを作っていただいたときに、フレーム間でのJavascriptでのリンクの呼び出しを実装したのですが、Safariのバージョンアップか使用の変更かで、その仕組みが動かなくなってしまいました。下記が中身になります。どなたか原因を特定できる方はいらっしゃいませんか？以下、構造と重要なコードの抜き出しになります。＜構造＞ B.htmlに読み込み後に表示される場所があり、B.htmlのインラインフレームの中にA.htmlがあります。　　　　　　B.html｛A.html｝ A.htmlが表示されたときにB.htmlのリンク箇所が表示される仕組みです。　　　　　　A.html→B.html ＜コード＞ ----------------------------------------- A.html（表示後にB.htmlに情報を送ります） ----------------------------------------- B.html（リンクを表示する方です）　 ----------------------------------------- onload="getData()"の関係なのでは、と見当はつけてるのですが、修正の仕方が？マークです。もし原因が解る方がいましたら、教えていただきたいと思っております。どうぞよろしくお願いいたします。 -----------------------------------------

fujillin · Accepted Answer

#1です。

手元のFx57、Chrome62、IE11で試してみました。
ローカル環境で実行すると、Chromeはクロスオリジンということでブロックされてしまいますが、サーバに挙げればご提示のままでも動作するみたいですね。
他のブラウザでは両方とも動作するようです。

＞おそらくこの文字情報Aを代入するものと思われます。
ということであれば、function getData()の内容を以下にしてみたらどうでしょうか？
top.document.getElementById("A").innerHTML = document.forms["skip"].elements["data"].value;

最近のブラウザ対象で良ければ、
top.document.getElementById("A").innerHTML = document.querySelector("form[name='skip'] input[name='data']").value;
の方が、確実かも知れません。

fujillin · Answer

こんにちは。回答が無いようなので・・・とは言っても、Mac系は知らないため、Safariの独自仕様の部分はまったくわかりませんので、一般論としての内容にで、参考にでもなればといった程度です。ご提示のスクリプトは大変短いもので、問題があるとしてもたったの1行＞top.document.getElementById ("A").firstChild.data = document.skip.data.value; だけです。左辺の属性に、右辺の値をセットするという形式にはなっていますが、内容的には合点がいきません。（これまで動作していたというのも不思議な気がします）ご説明のようにB.html内のiframeにA.htmlが表示され、A.html内で動作しているjavascriptからみて親文書に当たるB.htmlを操作したいということだと思いますが、＞top.document.getElementById ("A") は、B.html内のid="A"で識別できる要素を意味していますので、ご提示の＞　のリンク要素を指していることになります。（ここまでは問題ないと思います）通常、firstChildは文字通り、その最初の子要素を意味していますが、ご提示のリンク要素には子要素が無いので、"　"のテキスト要素が該当することになります。さらにそのdata属性ということになりますが、テキスト要素には属性という概念はありません。（テキストなので）リンク要素内に本当は何かの子要素が存在する（あるいはした）、ということはありませんでしょうか？仮に子要素が存在したとしても、通常の要素にはdataという属性は一般的には存在しません。（オレオレで設定することは可能です。）一方で、HTML5ではカスタム属性といわれるdata-*という属性が定義されるようになりました。（*は任意の属性名） https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-* しかしながら、この属性値にスクリプトからアクセスするには、datasetというプロパティを通じて行う仕様になっていますので、ご提示のスクリプトとは一致しません。ご説明では＞A.htmlが表示されたときにB.htmlのリンク箇所が表示される仕組みです。とありますので、リンク先（url）を変更したいのであれば、リンク要素のhref属性の値を書き換える処理を行うはずなので、子要素を取得する必要もなく、また、そのdata属性（←存在するのか不明ですが）を書き換えることでは実現できないはずです。さらに、右辺について見てみると、右辺は代入すべき値を意味することになりますが、＞document.skip.data.value は少々ファジーな記述法で、B.html文書内の（多分）id="skip"となっている要素のdata属性の値を意味します。該当する要素そのものが存在するのかどうかはご質問文からはわかりませんが、上述したdata属性の疑問がここにもありそうです。また、左辺ではidを持つ要素を指定するのに、getElementById ("A")という記述法を用いているので、右辺がもしもidを意味しているなら、.document.getElementById ("skip")とした方が明解です。一方で、独自にskipタグを設けていたり、name="skip"のような要素でも、この記述で取得できる場合があったりするのが「ファジー」と書いた理由です。たったの1行のことですが、先にも述べましたように、この記述で本当に動作していたのかが疑問です。逆に、もう少し明確に「何をどうしたい」を示していただければ、修正の方法を考えることができるかも知れません。（修正というよりは新たに考えますが…）例えば、 B.html内に（ひとまず）記述してある　の内容を、A.html内にある　hoge というリンクと同じ内容にしたいので、結果として　hoge となるような修正をしたい。といった程度まで、なさりたい内容がはっきりすれば、一般的なスクリプトでの処理を提示することができるかも知れません。

Safariでの onload="getData()" の挙動について

こんにちは。

#1です。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング