国际电话号码的jQuery插件：标志和电话占位符丢失

Question

对于我的一个项目，我正在使用国际电话号码的intl-tel-input ，jQuery插件。 该插件声称“自动将输入占位符设置为所选国家/地区的示例编号”，但我无法使其正常工作。 到目前为止，我尝试了两件事：

1）我下载了库并从我的代码中引用了一个JS文件（类似于demo ）。 这是我的JS文件的片段：

  $("#phone").intlTelInput({
    allowExtensions: false,
    autoFormat: true,
    autoHideDialCode: false,
    autoPlaceholder: true,
    defaultCountry: "ng",
    ipinfoToken: "yolo",
    nationalMode: true,
    numberType: "MOBILE",
    onlyCountries: ['ng', 'us', 'gb'],
    preferredCountries: [],
    utilsScript: "/projects/intl-tel-input-master/lib/libphonenumber/build/utils.js" 
  });

但我在Chrome的JS控制台中遇到以下错误：

XMLHttpRequest无法加载file：///projects/intl-tel-input-master/lib/libphonenumber/build/utils.js。 交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource。

2）我将库文件夹放在服务器上，并使用服务器URL引用utils.js文件（ http://web.mit.edu/aizhan/www/intl-tel-input-master/lib/libphonenumber/build/utils。 js ）。 这仍然无法在我的机器上运行，但它可以在带有HTTP协议的codepen中运行，但不适用于HTPPS：

HTTP： http ： //codepen.io/atoregozh/pen/raEPbv
HTTPS： https ： //codepen.io/atoregozh/pen/MYMLXv

我的整体问题：如何让图书馆在本地运作？ 我还有2个子问题：1）如何修复关于XMLHttpRequest加载的错误？ （我之前从stackoverflow上的其他帖子中读过它，我不想搞乱安全设置）; 2）为什么代码通过HTTP而不是通过HTTPS工作？

我将衷心感谢您的帮助。 如果你想看到实际的项目代码， index.html文件就在这里 ， Javascript文件就在这里

Answer 1

问题 ：如何让图书馆在本地工作？

你在Yeoman ，ExpressJs或IIS Express中使用。

例如（运行服务器）：yeoman服务器

我是通过IIS Express测试的，演示文件是对的。

问题 ：如何解决有关XMLHttpRequest加载的错误？

你在另一台服务器（跨域）加载资源，我更喜欢在curent服务器中加载代理。 要解决此问题，请参阅“使用jQuery AJAX加载跨域html页面” 。

另一个问题 ：为什么代码通过HTTP而不是通过HTTPS工作？

如果你看到浏览器控制台，包括下面的代码。

Loading mixed (insecure) display content "" on a secure page.
Blocked loading mixed active content "http://web.mit.edu/aizhan/www/intl-tel-input-master/build/js/intlTelInput.js"

在firefox 链接中解决您的问题

如果HTTPS页面包含HTTP内容，则攻击者可以读取或修改HTTP部分，即使主页面是通过HTTPS提供的。

祝好运。