httpsだと動かない現象について

いつもお世話になっております。

javascriptのonChange()で関数を呼び出し、表示・非表示を制御しています。
テスト環境のhttp://〜では正常に動きましたが、本番環境の（https://〜）では関数自体が呼ばれません。（ブレークポイントやアラートを入れて確認）
jsのソースを相対パスで外部ファイルにしても現象は変わりませんでした。

原因がわからず困っております。
よろしくお願い致します。

load時に、参加しない限定と参加しない限定２を非常時にしてます。
次に、selectboxで表示しないを選択時に、条件に沿った表示を切り替えています。

html
1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
6<meta http-equiv="Content-Script-Type" content="text/javascript"/>
7
8<script type="text/javascript" language="javascript">
9 function hiddenblock() {
10  document.getElementById("notpt").style.display="none";
11  document.getElementById("notpt2").style.display="none";
12  }
13</script>
14
15<script type="text/javascript" language="javascript">
16 function kakunin() {
17  wkJyu1index = document.check.Select1.selectedIndex;
18  wkJyu1 = document.check.Select1.options[wkJyu1index].value; 
19				
20  if(wkJyu1 == "参加しない"){
21   document.getElementById("notpt").style.display="block";
22   document.getElementById("pt").style.display="none";
23   document.getElementById("notpt2").style.display="block";
24   document.getElementById("pt2").style.display="none";
25  }else{
26   document.getElementById("pt").style.display="block";
27   document.getElementById("notpt").style.display="none";
28   document.getElementById("pt2").style.display="block";
29   document.getElementById("notpt2").style.display="none";
30  }
31 }
32</script>
33</head>
34
35<body onLoad="hiddenblock()">
36 <form name="check">
37  <select name="サマリーセッション"  required="required" onChange="kakunin();" id="Select1">
38   <option value=""></option>
39   <option value="参加する（初めて）" id="support1">参加する（初めて）</option>
40   <option value="参加する（2回目）" id="support2">参加する（回目）</option>
41   <option value="参加する（3回目以上）" id="support2">参加する（3回目以上）</option>
42   <option value="参加しない" id="support2">参加しない</option>
43  </select>
44
45 <div id="notpt">
46  <select name="参加しない限定" required="required">
47   <option value="参加しない" id="support2">参加しない</option>
48  </select>
49 </div>
50
51 <div id="pt">
52  <select name="参加選択可" required="required">
53   <option value=""></option>
54   <option value="参加する" id="support1">参加する</option>
55   <option value="参加しない" id="support2">参加しない</option>
56  </select>
57 </div>
58
59 <div id="notpt2">
60  <select name="参加しない限定2" required="required">
61   <option value="参加しない" id="support2">参加しない</option>
62  </select>
63 </div>
64
65 <div id="pt2">
66  <select name="参加選択可2" required="required">
67   <option value=""></option>
68   <option value="参加する" id="support1">参加する</option>
69   <option value="参加しない" id="support2">参加しない</option>
70  </select>
71 </div>
72
73 </form>
74</body>
75</html>

icham

2015/12/15 06:39

ソースを貼り付けた方が良い回答が減られると思うので、問題ない範囲で提示してみてはいかがでしょうか？

lime

2015/12/15 06:40

そうですね、ありがとうございます。ソースを貼りたいと思います。

lime

2015/12/15 08:38

補足：ページ表示に読み込まれるonLoadは正常に動いています。

lime

2015/12/15 09:24

補足：試しにonchangeからonclickをにしたところ反応に遅さはあるものの反応しました。テスト環境（http）のonchangeの動作が望ましいのですが根本的な原因はまだ不明です。。。

lime

2015/12/16 00:17

追記：httpsを外したところ、現象は改善されず‥ https上で動かないと申しましたが、httpsだからというわけでなさそうでした。

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

回答5件

AWSのS3のhttpsの環境で同じコードを動かしてみましたが、kakunin関数が呼ばれていました。(console.logで確認)

httpsが原因か切り分けるために、別のhttpsの環境でどうなるか確認してみてはどうでしょうか。

ちなみに関係ないとは思いますが、id属性の重複が気になりました。

表示・非表示を切り替えるのは、jQueryなどを使えばクロスブラウザで動かす事が容易にできますので、検討してみてはいかがでしょうか。

投稿2015/12/15 10:02

sekitaka_1214

総合スコア509

lime

2015/12/16 00:12

sekitaka_1214様ご回答ありがとうございます。別のhttps環境でテストしたいのですが、当方他の環境でテストするのが難しいのでご提案いただきましたjQueryで動かすことをやってみたいと思います！ありがとうございます！

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

自己解決

【一応解決？】
sekitaka_1214さんに教えて教えていただいたjQueryを使った表示・非表示の制御で希望の通りの処理が出来るようになりました。
根本的な今回の原因は未だ不明ですが、多くの方に回答いただき誠にありがとうございました。

jQueryを使った表示・非表示については、こちらのhttp://humo-life.net/blog/jquery/263/ページある jQuery changeイベントを使用しました。

html
1<script type="text/javascript">
2$(function(){
3  $('#tr_type select[name="type"]').change(function() {
4    if ($('select[name="type"] option:selected').val() == 'book') $('#tr_writer').css('display','table-row');
5    else $('#tr_writer').css('display','none');
6  });
7});
8</script>
9<table>
10  <tr id="tr_type">
11    <th>タイプ</th>
12    <td>
13      <select name="type">
14        <option value="movie">映画
15        <option value="book">本
16      </select>
17    </td>
18  </tr>
19  <tr id="tr_title">
20    <th>タイトル</th>
21    <td>
22      <input type="text" name="title" value="" size="20" maxlength="20">
23    </td>
24  </tr>
25  <tr id="tr_writer" style="display: none;">
26    <th>著者</th>
27    <td>
28      <input type="text" name="writer" value="" size="20" maxlength="20">
29    </td>
30  </tr>
31</table>

投稿2015/12/16 02:56

lime

総合スコア16

ローカル環境では確かに動いてますね。
まずは一旦、原因の切り分けのためにhttpsを外してみてはいかがでしょうか？

投稿2015/12/15 13:26

icham

総合スコア559

lime

2015/12/16 00:13

icham様ご回答ありがとうございます。そうですね、一旦httpsを外して動かしてみたいと思います！ありがとうございます！

lime

2015/12/16 00:17

ただいま、httpsをはずして実行したところ現象は変わりませんでした。つまりhttpsだから動かないというわけではなさそうでした。

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

JSが完全に動かないのなら、本番環境のWebサーバーにCSP (Content Security Policy)が設定されていないか確認してみてください。

投稿2015/12/15 07:23

hello-world

総合スコア1342

lime

2015/12/15 08:21

hello-world様ご回答ありがとうございます。テスト環境で作った同じソースを同じ本番環境のwebサーバーにアップしても同様の現象が起きております。 httpsにするにあたり特定フォルダ（今回動かないファイルがあるフォルダ）をhttpsにするようにhtaccessで制御しているのですがこれが原因ということもありえますでしょうか…

hello-world

2015/12/15 08:31

ディベロッパーツールのJSのコンソールにエラーとかも出ていないですか？

lime

2015/12/15 09:33

エラーはでてないです。試しにonclickにしたところ、一応onclickでは動きました。

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

jQueryなど、呼び出している外部ライブラリがHTTP経由だった、ということはないでしょうか。

投稿2015/12/15 06:33

maisumakun

総合スコア145183

lime

2015/12/15 06:37

maisumakun様回答ありがとうございます。 JQuery等の外部ライブラリが使っていないので、http〜の記述はありませんでした。 head内に<script type="text/javascript" language="javascript">処理</script>を再度書き手、ブレークポイントを設置しましたが関数自体が呼ばれていないようです。

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

あなたの回答