Question

所以我对网络编程有点新意，我正在尝试在我的网站上添加一个jQuery小部件（当你点击文本框时弹出日历）。当我在本地打开chrome中的html脚本时，小部件工作正常，但在我的网站上它根本不起作用。

当我以普通用户身份访问我的网站时，Chrome会在https://________之前说“不安全”。也许这与它有关？

对于大块代码感到抱歉，但我不知道我的脚本中的错误在哪里。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="appointment">
  </head>


<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>



<body>
  <h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
  <aside>
       <p> We can meet you on campus or at our office!
    <br>
    <br>
    Please use the form below to schedule an appointment. 
                  </p>
   </aside>

<!-- START FORM -->

  <form id="gform" method="POST" class="pure-form pure-form-stacked"
  action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">

    <fieldset class="pure-group">
      <label for="name">Name* : </label>
<p>
      <input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
    <p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>

    </fieldset>

    <fieldset class="pure-group">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>

<p>Date: <input type="text" id="datepicker"></p>
</fieldset>

    <input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >


  </form>

  <!-- POST SUBMISSION -->
  <div style="display:none;" id="thankyou_message">
    <h2>Thank you for getting in touch with us.
      We look forward to meeting with you!</h2>
  </div>

  <!-- Submit the Form to Google Using "AJAX" -->
  <script data-cfasync="false" type="text/javascript"
  src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
  <!-- <script data-cfasync="false" type="text/javascript"
  src="/form-submission-handler.js"></script> -->

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
<!-- END -->

</body>
</html>

Answer 1

它不起作用，因为你多次放置JS / jquery。这个版本应该有效：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="appointment">
  </head>


<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/style.css">

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>



<body>
  <h2 class="content-head is-center">SET UP AN APPOINTMENT <em>(Optional)</em></h2>
  <aside>
       <p> We can meet you on campus or at our office!
    <br>
    <br>
    Please use the form below to schedule an appointment. 
                  </p>
   </aside>

<!-- START FORM -->

  <form id="gform" method="POST" class="pure-form pure-form-stacked"
  action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec">

    <fieldset class="pure-group">
      <label for="name">Name* : </label>
<p>
      <input id="name" firstNname="firstName" placeholder="First Name" /> </p>
<br>
    <p><input id="name" lastNname="lastName" placeholder="Last Name" /></p>

    </fieldset>

    <fieldset class="pure-group">

  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>

<p>Date: <input type="text" id="datepicker"></p>
</fieldset>

    <input type="submit" value="Submit" action="https://script.google.com/macros/s/AKfycbyFvR4QUsL6wSpQbv283kcZuyKDM_vTGbSeqvM91UykoFah9s4/exec" >


  </form>

  <!-- POST SUBMISSION -->
  <div style="display:none;" id="thankyou_message">
    <h2>Thank you for getting in touch with us.
      We look forward to meeting with you!</h2>
  </div>

  <!-- Submit the Form to Google Using "AJAX" -->
  <script data-cfasync="false" type="text/javascript"
  src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>
  <!-- <script data-cfasync="false" type="text/javascript"
  src="/form-submission-handler.js"></script> -->
<!-- END -->

</body>
</html>

Answer 2

源代码中包含一些 http：// 网址的资源，因此这就是为什么它显示“不安全”。我建议在html底部包含与你的功能相关的所有Javascript库。

Javascript在本地工作，但不在网站上

2 个答案: