0

クラウドファンディング ページを作成中で、現在の進行状況を示すダッシュボードを作成したいと考えています: http://hyve.me/crowdfunder

私が使用するJavaScriptは次のとおりです。

<script type="text/javascript">
  // Facebook Likes
  $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
    $("#facebooklikes").text(response["hyve.me"].likes);
  });

  // registered Users
  $.ajax({
    type: 'GET',
    url: 'http://www.hyve.me/usercount',
    dataType: 'JSON',
    success: function (response) {
      $("#usercount").text = response;
    }
  });

  // days left
  jQuery(document).ready(function($) {
    today = new Date();
    deadline = new Date("October 31, 2013");
    msPerDay = 24 * 60 * 60 * 1000 ;
    timeLeft = (deadline.getTime() - today.getTime());
    $("#countdown").text(Math.floor(timeLeft / msPerDay));
  });

  // progress bar for shares
  $.getJSON("https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F", function (response) {
    var mentions = response.shares;
    document.getElementById("myProgressBar_Success").setAttribute('style', "width: " + (mentions / 6).toString() + "%;");
    document.getElementById("myProgressBar_Warning").setAttribute('style', "width: " + ((600 - mentions) / 6).toString() + "%;");
  });
</script>

ダッシュボードの HTML は次のとおりです。

<div class="span8 offset2">
  <div class="row-fluid statistics">
    <div class="span4"><div class="linediv-l"><h3 id="facebooklikes">0</h3><p>FB <i class="icon-thumbs-up"></i></p></div></div>
    <div class="span4"><div class="linediv-c"><h3 id="usercount">0</h3><p>Hyve-Users</p></div></div>
    <div class="span4"><div class="linediv-r"><h3 id="countdown">0</h3><p>days left</p></div></div>
  </div>
</div>
<div class="row-fluid">
  <div class="span10 offset1">
    <div class="thermometer progress active">
      <div class="bar bar-success" style="width: 50%;" id="myProgressBar_Success"></div>
      <div class="bar bar-warning" style="width: 50%;" id="myProgressBar_Warning"></div>
    </div>
  </div>
</div>

今、私はいくつかの質問があります:

  1. Facebook のいいねの数は、Chrome (v29) と Firefox (v23) では正しく表示されますが、Internet Explorer (v9) では正しく表示されません。このブラウザーを独立させる方法はありますか?
  2. 登録ユーザー数は、同じドメイン (hyve.me) にいる場合にのみ機能します。したがって、これは本番環境でのみテストできますが、開発 (AWS) またはステージング (heroku.com) ではテストできません。これを修正する方法はありますか?
  3. addthis.com からのデータに従って進行状況バーが更新されない - なぜ getJSON() は Facebook-Graph で動作し、AddThis の Web サービスでは動作しないのですか?

これは Stackoverflow に関する私の最初の質問であり、過去 2 日間かけて答えを見つけました。たぶん、ここの誰かが私を正しい方向に向けることができます.

前もって感謝します!

-クリストフ

4

1 に答える 1

0

したがって、これで 3 つの質問すべてに答えることができます。

$(function(){


   // Facebook Likes
   $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
        $("#facebooklikes").text(response["hyve.me"].likes);
   });

   // registered Users
   $.ajax({
       type: 'GET',
       url: 'http://www.hyve.me/usercount',
       dataType: 'jsonp',
       success: function (response) {
            $("#usercount").text = response;
       }
   });

   // progress bar for shares
   $.ajax({
       type: 'GET',
       url: 'https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F',
       dataType: 'jsonp',
       success: function (response) {
           var mentions = response.shares;
           $("#myProgressBar_Success").css({ width: (mentions / 6) + "%" });
           $("#myProgressBar_Warning").css({ width: ((600 - mentions) / 6) + "%" });
       }
   });

   // days left
   today = new Date();
   deadline = new Date("October 31, 2013");
   msPerDay = 24 * 60 * 60 * 1000 ;
   timeLeft = (deadline.getTime() - today.getTime());
   $("#countdown").text(Math.floor(timeLeft / msPerDay));

});

自分以外のドメインから ajax 経由でデータにアクセスしようとすると、クロスドメインの問題が発生していました。詳細については、 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScriptを参照してください。

jQuery.ajax メソッドを使用する場合は、 as を指定できdataTypeますjsonpJSONP の詳細については、この回答を参照してください。

この回答を見ると、クロスオリジン GET リクエストは通常​​、JSONP なしで許可されますが、許可されない場合もあるようです。

そのため、データは読み込まれませんでした。したがって、html を更新するための値を取得することはありません。

また、AddThis コールバックを微調整して、getElementByID の代わりに DOM 操作に jQuery を使用するようにしました。それが IE のバグを引き起こしている可能性があります。すでに jQuery を使用している場合は、DOM の操作方法と一貫性を保つことが最善です。

于 2013-08-27T21:42:39.587 に答える