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

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

ただいまの
回答率

90.45%

  • JavaScript

    21041questions

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

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

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,634

lime

score 10

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

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

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

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

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Script-Type" content="text/javascript"/>

<script type="text/javascript" language="javascript">
 function hiddenblock() {
  document.getElementById("notpt").style.display="none";
  document.getElementById("notpt2").style.display="none";
  }
</script>

<script type="text/javascript" language="javascript">
 function kakunin() {
  wkJyu1index = document.check.Select1.selectedIndex;
  wkJyu1 = document.check.Select1.options[wkJyu1index].value; 

  if(wkJyu1 == "参加しない"){
   document.getElementById("notpt").style.display="block";
   document.getElementById("pt").style.display="none";
   document.getElementById("notpt2").style.display="block";
   document.getElementById("pt2").style.display="none";
  }else{
   document.getElementById("pt").style.display="block";
   document.getElementById("notpt").style.display="none";
   document.getElementById("pt2").style.display="block";
   document.getElementById("notpt2").style.display="none";
  }
 }
</script>
</head>

<body onLoad="hiddenblock()">
 <form name="check">
  <select name="サマリーセッション"  required="required" onChange="kakunin();" id="Select1">
   <option value=""></option>
   <option value="参加する(初めて)" id="support1">参加する(初めて)</option>
   <option value="参加する(2回目)" id="support2">参加する(回目)</option>
   <option value="参加する(3回目以上)" id="support2">参加する(3回目以上)</option>
   <option value="参加しない" id="support2">参加しない</option>
  </select>

 <div id="notpt">
  <select name="参加しない限定" required="required">
   <option value="参加しない" id="support2">参加しない</option>
  </select>
 </div>

 <div id="pt">
  <select name="参加選択可" required="required">
   <option value=""></option>
   <option value="参加する" id="support1">参加する</option>
   <option value="参加しない" id="support2">参加しない</option>
  </select>
 </div>

 <div id="notpt2">
  <select name="参加しない限定2" required="required">
   <option value="参加しない" id="support2">参加しない</option>
  </select>
 </div>

 <div id="pt2">
  <select name="参加選択可2" required="required">
   <option value=""></option>
   <option value="参加する" id="support1">参加する</option>
   <option value="参加しない" id="support2">参加しない</option>
  </select>
 </div>

 </form>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • lime

    2015/12/15 17:38

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

    キャンセル

  • lime

    2015/12/15 18:24

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

    キャンセル

  • lime

    2015/12/16 09:17

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

    キャンセル

回答 5

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/16 09:12

    sekitaka_1214様
    ご回答ありがとうございます。

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

    キャンセル

check解決した方法

0

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

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

<script type="text/javascript">
$(function(){
  $('#tr_type select[name="type"]').change(function() {
    if ($('select[name="type"] option:selected').val() == 'book') $('#tr_writer').css('display','table-row');
    else $('#tr_writer').css('display','none');
  });
});
</script>
<table>
  <tr id="tr_type">
    <th>タイプ</th>
    <td>
      <select name="type">
        <option value="movie">映画
        <option value="book"></select>
    </td>
  </tr>
  <tr id="tr_title">
    <th>タイトル</th>
    <td>
      <input type="text" name="title" value="" size="20" maxlength="20">
    </td>
  </tr>
  <tr id="tr_writer" style="display: none;">
    <th>著者</th>
    <td>
      <input type="text" name="writer" value="" size="20" maxlength="20">
    </td>
  </tr>
</table>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/15 15:37

    maisumakun様
    回答ありがとうございます。

    JQuery等の外部ライブラリが使っていないので、http〜の記述はありませんでした。

    head内に<script type="text/javascript" language="javascript">処理</script>を再度書き手、ブレークポイントを設置しましたが関数自体が呼ばれていないようです。

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/15 17:21

    hello-world様
    ご回答ありがとうございます。

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

    キャンセル

  • 2015/12/15 17:31

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

    キャンセル

  • 2015/12/15 18:33

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/16 09:13

    icham様
    ご回答ありがとうございます。

    そうですね、一旦httpsを外して動かしてみたいと思います!
    ありがとうございます!

    キャンセル

  • 2015/12/16 09:17

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

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21041questions

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