简体   繁体   English

JSFiddle脚本不适用于HTTPS

[英]JSFiddle Script Does Not Work With HTTPS

I have the following JSFiddles script that simply implements the jQuery-UI Datepicker so that a calendar appears in the date input form. 我有以下JSFiddles脚本 ,该脚本仅实现jQuery-UI Datepicker ,以便在日期输入表单中显示日历。

Here is the code 这是代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker functionality</title>
  <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <!-- Javascript -->
  <script>
     $(function() {
        $( "#datepicker" ).datepicker();
     });
  </script>
</head>
<body>
  <!-- HTML --> 
    <p>Enter Date: <input type="text" id="datepicker"></p>
</body>
</html>

Interestingly, when I use the link I put into this question, the javascript does not work, while the original link does work. 有趣的是,当我使用我在这个问题中使用的链接时,javascript不起作用,而原始链接却起作用。 I found that if I remove the https:// from the link the javascript works perfectly. 我发现,如果我从链接中删除https://,则javascript可以正常运行。 I do not know nearly enough about this subject to understand what could be going on. 我对这个问题了解得还不够多,无法理解可能会发生什么。 What about the https:// could be causing an error with the javascript? 那https://可能会导致JavaScript错误?

Is it that the links that I include can not be accessed? 是我所包含的链接无法访问吗?

This is Mixed Content and is a security feature to maximise the security of your page. 这是混合内容 ,是一项安全功能,可最大程度地提高页面的安全性。

As you've already found out, and has been mentioned, it's the script resources that you are accessing over http (not https) that cause the problem. 正如您已经发现并提到的那样,是导致您通过http(而非https)访问的脚本资源。

You have 2 options (1 being preferable). 您有2个选项(最好是1个)。

  1. Change the scripts to be called over https, then your link will work 更改要通过https调用的脚本,然后您的链接将起作用
  2. Change your URL to be over http 将您的网址更改为通过http

Code as per option #1 below. 按照下面的选项#1进行编码。

 $(function() { $("#datepicker").datepicker(); }); 
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> <p>Enter Date: <input type="text" id="datepicker"></p> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM