前提・実現したいこと

・window.openのウインドウ名(別フレーム)の指定方法
window.openで指定したページを別フレームに表示させたいのです。
IE、Edge、Chromeでは希望通りに動作しましたが、Firefoxだけ希望通りに動作しません。
どなたか、ご教授願えませんでしょうか。

・諸事情でa hrefではなく、window.openを使用したいのです。

発生している問題・エラーメッセージ

Firefoxだけ、指定したウインドウ名(別フレーム内）に表示することができません。

該当のソースコード

index.html
-----------
<html>
 <frameset rows="500,*" frameborder="NO" border="0">
  <frame name="up" src="up.html">
  <frame name="down" src="down.html">
 </frameset>
</html>


up.html
-----------
<html>
 <body>
  <input type="button" value="down.html#sono1"
onclick="window.open(this.value,'down')">その１
  <input type="button" value="down.html#sono2"
onclick="window.open(this.value,'down')">その２
 </body>
</html>


down.html
-----------
<html>
 <body>
    <a name="sono1"></a>その１
    <br>内容・・・・・・・
    <br>
    <a name="sono2"></a>その２
 </body>
</html>

試したこと

ウインドウ名を'up'にすると、up.htmlのフレームに表示されました。
ウインドウ名を'null'にすると、別タブに表示されますが動作していることが分かりました。
ウインドウ名を'down'のみ希望通りに動作してくれません。
記述をjavascriptとhtmlを分けて試しましたが、結果は同じでした。
Firefoxが対応してないのか、書式が間違っているのかわかりません。

x_x

2020/02/14 02:21

再現しませんでした。ローカル(file:///～)でテストしているのでしょうか？

kontake

2020/02/14 15:07

ご回答ありがとうございます。再現していただきありがとうございます。そして、大変申し訳ありません！！！！！！仰る通り、ローカルでテストしていました。また、運用も個人情報が含まれているため、ローカルのみで行います。説明不足で申し訳ありません。そうなると、ローカルのFirefoxだけダメなんですね。。。ポータルサイトをchromeで検証しながら作成し、やっと完成したと思ったら・・・仕様上無理なんですかね。。。困った・・・ chrome専用として使ってもらうしかないですかね。。。

x_x

2020/02/18 02:17

使うときも各端末にファイルを置いて使うのですか？

kontake

2020/02/19 15:21 編集

いえ。nasに置いて使おうと思ってました。 nasにwebサーバー機能は付いていますが、ローカルで動かしたほうが動作が早かったので・・・でも、nasのwebサーバー機能でアクセス制限つけてやってみます。 file:///については、完全に抜けていました・・・htmlもロカールだったらfile:///ですよね・・・おかげでスッキリしました。ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

Firefoxが対応してないのか、書式が間違っているのか

Frameset を使う場合、DOCTYPE宣言文を記述してみてください。

HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
2<HTML>
3 <!-- omitted -->
4</HTML>

Webサイトの作成が HTML4からXHTMLに移行する頃、SEOの観点から Frameset を用いたページは 公開サイトでは非推奨(むしろ、禁止と言ったほうが正しい) となっています。

とはいえ、フレームが実装されるケースは現存します。
（CGIベースで組み込めるルータの設定画面など、LAN環境に特化したサイト）

モダンブラウザは　公開されたWebページの閲覧にターゲットしたHTTPクライアント のため、コンテンツとなるフレームで作るページには正しい DOCTYPE宣言の記述が必要になっているかもしれません。

追記）

IE,Edge,Chrome,Firefox で確認しました。

[up.html]（script要素内）

javascript
1var entryPoint = function() {
2  let inputs = document.getElementsByTagName("input");
3  for(var i=0,l=inputs.length; i<l; ++i) {
4    let btn = inputs[i];
5
6    // same as button.onclick
7    btn.addEventListener("click",function( event ){
8      let url = event.target.value;
9      window.open(url,"down"); // ご質問での「要件」
10    });
11  };
12
13};
14window.addEventListener("load", entryPoint);

[down.html]（name属性はやめ、id属性に変更/headingを利用）

HTML
1<body>
2  <h1>フレームセット（下段）</h1>
3
4  <h2 id="sono1">その１</h2>
5  <p><a href="#">その１</a>の内容</p>
6  <p>長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章</p>
7
8  <h2 id="sono2">その２</h2>
9  <p><a href="#">その２</a>の内容</p>
10  <p>長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章長い文章</p>
11</body>

イベントリスナの考え方

on~ 属性は書かず、addEventListener()を使う。
イベントリスナを定義できる on~ 属性は、HTML4時代にインジェクション対象になることも多かった危険な属性という感覚があります。初学者のうちはともかくとして、実装にはイベントリスナ用のAPIを使います。
2. URLのフラグメント識別子に対する考え方
URLにフラグメント識別子（#fragmentId）を用いる場合、対象ページの id 属性をターゲットにしたほうが良いです。（name属性のもつ一意性はフォーム内のinput[type=radio] や input[type=checkbox] によって、破綻する可能性があります。フォーム関連操作に限って用いるのがHTML4時代からの定石でした）。

投稿2020/02/13 22:59

編集2020/02/17 21:31

AkitoshiManabe

総合スコア5434

kontake

2020/02/17 14:19

すいません。回答していたと思ったらしていませんでした。 DOCTYPE宣言文は実際はしていましたが、ダメでした。また、ご紹介いただいたframesetを宣言文に付け加えましたが、やはりダメでした。

AkitoshiManabe

2020/02/17 21:22

追記しました。

kontake

2020/02/19 15:34

ご丁寧にありがとうございます。動作しました。こんな方法があるんですね。初心者の私にはとても勉強になります。 input type="button"や、input type="radio"を使ってジャンプさせる方法を見つけ、使いたかったのですが・・・教えていただいたソースを基に、いろいろ試してみます。

行動規範の内容に同意します