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

Question

我正在为我的一个项目使用 intl-tel-input、jQuery 国际 phone 号码插件。该插件声称 "Automatically set the input placeholder to an example number for the selected country"，但我无法使其正常工作。到目前为止，我尝试了两件事：

1) 我下载了库并从我的代码中引用了它的一个 JS 文件（类似于 the 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 cannot load file:///projects/intl-tel-input-master/lib/libphonenumber/build/utils.js. Cross origin requests are only supported for protocol schemes: 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 协议但不适用于 HTTPS 的代码笔中工作：

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

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

非常感谢您的帮助。如果想看实际项目代码，the index.html file is here and 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

if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS.

祝你好运。

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

jQuery plugin for international phone numbers: flags and phone placeholder missing

javascript

jquery

jquery-plugins

contentplaceholder