質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2894閲覧

HTML+JavaScript+IE11でURLから取得したパラメータをHTMLフォームの選択状態に反映したい

Hillbook

総合スコア8

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/28 06:27

編集2018/08/28 08:24

前提・実現したいこと

表示用HTMLを加工できる、検索プログラムのカスタマイズをしています。
具体的には、ファイル検索プログラムEverythingの表示用HTMLをカスタマイズしています。

 Everything
http://www.voidtools.com/support/everything/
日本語ヘルプ
https://sites.google.com/site/everythingjphelp/http

GETリクエストを自分に投げるタイプなので、URLからフォームの選択状態は判別できます。
なのでJavaScryptでURLを取得して、判別してHTMLフォームに反映するようにしたのですが
Chrome、Firefoxでは動作しますが、Internet Explorer 11では動作しません。。。

どうすればIEでも動くようになるでしょうか…?

よろしくお願いします。

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

エラーメッセージはありません。
ただ、チェックボックス、セレクトボックスの選択位置がデフォルトに戻り
前回検索時の選択が反映されないです。。。

該当のソースコード

HTML

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2<head> 3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4<meta name="viewport" content="width=512"> 5<title>Files Search</title> 6<link rel="stylesheet" href="/ress.css" type="text/css"> 7<link rel="stylesheet" href="/main.css" type="text/css"> 8<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 9<script src="/jquery.min.js" type="text/javascript"> 10</script> 11<script src="/scripts.js" type="text/javascript"> 12</script> 13</head> 14<body> 15 16 17~説明文~ 18 19 20<center> 21 <div class="input-part"> 22 <form class="search-form" name="sf" action="/" method="get"> 23 <input class="normalizebox" style="width:480px" name="search" type="text" title="Search Everything" value="" > 24  <input type="submit" value="検索" /> 25 <br> 26 <input type="checkbox" name="path" value="1" checked="checked">フォルダ名も検索対象 // 表示件数: 27 <select name="count"> 28 <option value="30">30件</option> 29 <option value="50">50件</option> 30 <option value="100">100件</option> 31 <option value="500">500件</option> 32 </select> 33 <br> 34 </form> 35 </div> 36 37 38~検索結果表示~ 39 40 41</center> 42</body>

JS

1// ---------------------------------------------------------------------- 2// scripts.js 3// IE用につくりなおしたもの 4// ---------------------------------------------------------------------- 5// ◆定義 6 7// 2.URLからパラメータ取得しHTMLに反映 8var params = (new URL(document.location)).searchParams; 9var path = Boolean(params.get("path")); 10var count = parseInt(params.get("count")); 11var paramOld = location.search; 12// ---------------------------------------------------------------------- 13// ◆読み込み時実施 14$(function() { 15 16// 2.パラメータ取得しHTMLに反映 17 18 // 旧ブラウザ補完 19 if (!path) { 20 paramOld = paramOld.substring(1); 21 /* 「&」で引数を分割して配列に */ 22 var pair = paramOld.split("&"); 23 var i = temp = ""; 24 var key = new Array(); 25 for (i = 0; i < pair.length; i++) { 26 /* 配列の値を「=」で分割 */ 27 temp = pair[i].split("="); 28 keyName = temp[0]; 29 keyValue = temp[1]; 30 /* キーと値の連想配列を生成 */ 31 key[keyName] = keyValue; 32 } 33 var path = count = ""; 34 path = Boolean(key["path"]); 35 count = parseInt(key["count"]); 36 } 37 //チェックボックス選択復帰 38 document.sf.path.checked = !!(path); 39 //セレクトボックス選択復帰 40 document.sf.count.value = count; 41});

JS

1// ---------------------------------------------------------------------- 2// scripts.js 3// Chrome用でうまくいったもの 4// ---------------------------------------------------------------------- 5// ◆定義 6// 2.URLからパラメータ取得しHTMLに反映 7var params = (new URL(document.location)).searchParams; 8var path = Boolean(params.get("path")); 9var count = parseInt(params.get("count")); 10// ---------------------------------------------------------------------- 11// ◆読み込み時実施 12$(function() { 13// 2.パラメータ取得しHTMLに反映 14 //チェックボックス選択復帰 15 document.sf.path.checked = !!(path); 16 //セレクトボックス選択復帰 17 document.sf.count.value = count; 18}); 19

試したこと

URL.searchParamsがうまくいかない、というような情報を見つけたので
location.searchでURL取得処理を追加しました。
◆定義 部分の上三行をコメントアウトしてもChromeでは動くので、
うまくいっていると思ったのですが…。

補足情報(FW/ツールのバージョンなど)

元プログラムの仕様上、HTMLサーバを立てているわけではないので
PHPほかの作り込は難しいです。
HTML+JavaScriptで、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ブラウザ開発ツールのコンソールで、エラー出ていませんか・・??

javascriptは、記述された順番に上から実行されていきます。
(後から実行される部分もコードの読み込み自体は記述された順番にされています。)

そして、エラーで止まったらそれ以降は実行されません。
(後から実行される部分のコードの読み込みもされません)

IEでは、URL()は未対応のようなので、

script.jsの

var params = (new URL(document.location)).searchParams;

が実行された時点で、致命的なエラーになり、jsの処理はここで終了しているはずです。

その後ろに書かれている

javascript

1 if (!path) {

この判定部分まで辿り着けていないことになりますね。

致命的なエラーを回避しなければいけませんので、実行する前に

例えば、

javascript

1var now_location = document.location; 2var path = null, count = null; 3 4$(function() { 5 //URL()が使えるかどうか確認する 6 if(typeof URL == 'function'){ 7 //URL()使える方の処理を書く 8 var params = (new URL(now_location)).searchParams; 9 path = Boolean(params.get("path")); 10 count = parseInt(params.get("count")); 11 }else{ 12 //URL()は使えないので、search文字列から取得する処理を書く 13 var paramOld = now_location.search.substring(1); 14 15 //・・・以下略 16 } 17 //チェックボックス選択復帰 18 document.sf.path.checked = !!(path); 19 //セレクトボックス選択復帰 20 document.sf.count.value = count; 21});

のような判定が必要かと思います。

※参考コードの動作検証はしていないので、スペルミス・不具合等ありましたらご容赦ください^^;

投稿2018/08/28 08:37

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Hillbook

2018/08/28 08:38

ありがとうございます! 基本的なことが理解できておらず…助かります。 まずは頂いたもので試してみます!
Hillbook

2018/08/28 08:51 編集

問題なく動作しました。 丁寧な解説、リンク、そして素敵なソース… 本当に助かりましたし、素晴らしいアドバイスに心から感謝します。 本当にありがとうございました!
Hillbook

2018/08/28 09:04

```JS // ---------------------------------------------------------------------- // scrypts.js // うまくいったJavaScrypt // ---------------------------------------------------------------------- // ◆定義 // 2.URLからパラメータ取得しHTMLに反映 var now_location = document.location; var path = null, count = null; // ---------------------------------------------------------------------- // ◆読み込み時実施 $(function() { // 2.パラメータ取得しHTMLに反映 // URL()が使えるかどうか確認する if (typeof URL == 'function'){ // URL()使える場合 var params = (new URL(now_location)).searchParams; path = Boolean(params.get("path")); count = parseInt(params.get("count")); } else { // URL()は使えないので、search文字列から取得する // IE想定の処理 var paramOld = now_location.search.substring(1); // 「&」で引数を分割して配列に var pair = paramOld.split("&"); var i = temp = ""; var key = new Array(); for (i = 0; i < pair.length; i++){ // 配列の値を「=」で分割 temp = pair[i].split("="); keyName = temp[0]; keyValue = temp[1]; // キーと値の連想配列を生成 key[keyName] = keyValue; } // _for var path = count = ""; path = Boolean(key["path"]); count = parseInt(key["count"]); } // _if_else //チェックボックス選択復帰 document.sf.path.checked = !!(path); //セレクトボックス選択復帰 document.sf.count.value = count; }); ```
guest

0

最終的にうまくいったソースコードです。

JS

1// ---------------------------------------------------------------------- 2// scrypts.js 3// うまくいったJavaScrypt 4// ---------------------------------------------------------------------- 5// ◆定義 6 7// 2.URLからパラメータ取得しHTMLに反映 8var now_location = document.location; 9var path = null, count = null; 10// ---------------------------------------------------------------------- 11// ◆読み込み時実施 12$(function() { 13 14// 2.パラメータ取得しHTMLに反映 15 // URL()が使えるかどうか確認する 16 if (typeof URL == 'function'){ 17 // URL()使える場合 18 var params = (new URL(now_location)).searchParams; 19 path = Boolean(params.get("path")); 20 count = parseInt(params.get("count")); 21 } else { 22 // URL()は使えないので、search文字列から取得する 23 // IE想定の処理 24 var paramOld = now_location.search.substring(1); 25 // 「&」で引数を分割して配列に 26 var pair = paramOld.split("&"); 27 var i = temp = ""; 28 var key = new Array(); 29 for (i = 0; i < pair.length; i++){ 30 // 配列の値を「=」で分割 31 temp = pair[i].split("="); 32 keyName = temp[0]; 33 keyValue = temp[1]; 34 // キーと値の連想配列を生成 35 key[keyName] = keyValue; 36 } // _for 37 var path = count = ""; 38 path = Boolean(key["path"]); 39 count = parseInt(key["count"]); 40 } // _if_else 41 42 //チェックボックス選択復帰 43 document.sf.path.checked = !!(path); 44 //セレクトボックス選択復帰 45 document.sf.count.value = count; 46});

投稿2018/08/28 09:01

編集2018/08/28 09:06
Hillbook

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問