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

Question

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

1) 我下载了该库并从我的代码中引用了其中一个 JS 文件（类似于the demo）。这是我的 JS 文件的 sn-p：

  $("#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 (http://web.mit.edu/aizhan/www/intl-tel-input-master/lib/libphonenumber/build/utils.js) 引用了 utils.js 文件。这仍然无法在我的机器上使用，但它可以在带有 HTTP 协议的 codepen 中使用，但不适用于 HTTP：

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

我的总体问题：我怎样才能使图书馆在本地工作？我也有 2 个子问题： 1）如何解决有关 XMLHttpRequest 加载的错误？ （我之前从 stackoverflow 上的其他帖子中读到过它，我不想弄乱安全设置）； 2) 为什么代码通过 HTTP 而不是通过 HTTPS 工作？

非常感谢您的帮助。如果想看实际项目代码，the index.html file is here 和Javascript file is here

Answer 1

问题：我怎样才能使图书馆在本地工作？

您在 Yeoman 、ExpressJs 或 IIS Express 中使用。

例如（运行服务器）： 约曼服务器

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

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

您在另一台服务器（跨域）中加载资源，我更喜欢在当前服务器中加载代理。 要解决这个问题，请参考'Loading cross domain html page with jQuery AJAX'。

另一个问题：为什么代码可以通过 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中解决您的问题link

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

祝你好运。