当方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に情報を送ります)
<script>
<!--
function getData(){
top.document.getElementById ("A").firstChild.data = document.skip.data.value;
}
// -->
</script>
</head>
<body id="trans" onload="getData()">
-----------------------------------------
B.html(リンクを表示する方です)
<a id="A" href="A.html" target="Aframe"> </a>
-----------------------------------------
onload="getData()"の関係なのでは、と見当はつけてるのですが、修正の仕方が?マークです。
もし原因が解る方がいましたら、教えていただきたいと思っております。
どうぞよろしくお願いいたします。
-----------------------------------------
No.2ベストアンサー
- 回答日時:
#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;
の方が、確実かも知れません。
No.1
- 回答日時:
こんにちは。
回答が無いようなので・・・とは言っても、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"で識別できる要素を意味していますので、ご提示の
><a id="A" href="A.html" target="Aframe"> </a>
のリンク要素を指していることになります。(ここまでは問題ないと思います)
通常、firstChildは文字通り、その最初の子要素を意味していますが、ご提示のリンク要素には子要素が無いので、" "のテキスト要素が該当することになります。
さらにそのdata属性ということになりますが、テキスト要素には属性という概念はありません。(テキストなので)
リンク要素内に本当は何かの子要素が存在する(あるいはした)、ということはありませんでしょうか?
仮に子要素が存在したとしても、通常の要素にはdataという属性は一般的には存在しません。(オレオレで設定することは可能です。)
一方で、HTML5ではカスタム属性といわれるdata-*という属性が定義されるようになりました。(*は任意の属性名)
https://developer.mozilla.org/ja/docs/Web/HTML/G …
しかしながら、この属性値にスクリプトからアクセスするには、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 id="A" href="A.html" target="Aframe"></a>
の内容を、A.html内にある
<a id="skip" href="hoge.html">hoge</a>
というリンクと同じ内容にしたいので、結果として
<a id="A" href="hoge.html" target="Aframe">hoge</a>
となるような修正をしたい。
といった程度まで、なさりたい内容がはっきりすれば、一般的なスクリプトでの処理を提示することができるかも知れません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS HTMLの条件によって表示方向が切り替わる実装のコードを教えて下さい。 (コードは下記リンクを参照) 1 2022/09/25 14:35
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
読み込んだQRコードをフォーム...
-
セレクトを全て選択されていな...
-
switch文のswitch(n)の部分を複...
-
セレクトボックスを2つ選択して...
-
jQueryで同じクラス名のものを...
-
①入力フォーム→②確認表示画面→③...
-
jQueryでシンセサイザーを作っ...
-
IndexedDB を使ってファイルア...
-
スマホ上で、左右スワイプで次...
-
GASに文字列として関数を入れる...
-
フォームが空欄の時にフォーム...
-
二次元配列の全要素の全要素を...
-
【GAS】WEBアプリでハイパーリ...
-
画像の表示位置
-
【Google Apps Script】「ライ...
-
変数宣言と初期値代入の場所に...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで追加した要素がマウス...
-
一定時間ごとに表示内容を切り...
-
jQueryでloadした部分に.jsが効...
-
フレーム内の要素へのXPATHはど...
-
Safariでの onload="getData()"...
-
毎日午前0時にhtmlを切り替えた...
-
google map api で下記のhtmlが...
-
テーブルの形式を整えるJavascript
-
JavaScriptで擬似フレーム、読...
-
javaの変数又はデータの共有
-
jQuery toggle() 戻るで開いた...
-
自動で現れるTOPにもどるボタン...
-
Folder.selectDialog()について
-
div要素の入れ替え。半透明イメ...
-
複数の特定のURLからのみアクセ...
-
Fire Foxで作動しないscriptが...
-
jqueryを使った共通html埋め込...
-
XHTMLで外部JSファイルを読み込...
-
onblurイベント時にPHPファイル...
-
inputの中身を書き換える方法に...
おすすめ情報
ご返信ありがとうございます。
なるほど。かなり曖昧な状態で動作していたということなんですね。
なんとなくですが解説で要領をつかめました。ありがとうございます。
このスクリプトですが、一応Firefoxや他のものでは動いていて、現在Safariのみで動かない状況となっております。
A.htmlの文章内にこんな記述を見つけました。これですね!
<form name="skip">
<input type="hidden" name="data" value="A">
</form>
リンクの表示ですが、「リンクが張ってある箇所に、文字情報がない状態から、文字部分を新たに表示させリンクを出現させる」
というような仕様になっておりました。
おそらくこの文字情報Aを代入するものと思われます。
もしよろしければこの内容で、正規表現を教えていただけないでしょうか…?