Javascript 缓存facebook和g+js文件，没有错误，只有按钮_Javascript_Facebook_Caching_Google Plus

Javascript 缓存facebook和g+js文件，没有错误，只有按钮

javascript facebook caching google-plus

Javascript 缓存facebook和g+js文件，没有错误，只有按钮,javascript,facebook,caching,google-plus,Javascript,Facebook,Caching,Google Plus,现在我加载facebook、twitter、google、pinterest。。。异步，方法是在加载窗口后将它们附加到DOM中，如下所示： <script type="text/javascript"> function sm_l() { ! function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (!d.getElementByI

现在我加载facebook、twitter、google、pinterest。。。异步，方法是在加载窗口后将它们附加到DOM中，如下所示：

<script type="text/javascript">
    function sm_l() {      
       ! function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (!d.getElementById(id)) {
              js = d.createElement(s);
              js.id = id;
              js.src = "//platform.twitter.com/widgets.js";
              js.async = true;
              fjs.parentNode.insertBefore(js, fjs);
          }
      }(document, "script", "twitter-wjs");
      window.___gcfg = {
          lang: 'es'
      };
      (function() {
          var po = document.createElement('script');
          po.type = 'text/javascript';
          po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(po, s);
      })();
      (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s);
          js.id = id;
          js.async = true;
          js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=121495767915738";
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      (function() {
          var po = document.createElement('script');
          po.type = 'text/javascript';
          po.async = true;
          po.src = '//assets.pinterest.com/js/pinit.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(po, s);
      })();

      $('#share_the_love').show();
      $('.social_media').slideDown();      
  }     
</script>

<?php
function curl_file_get_contents($url) {
    $curl = curl_init();
    $userAgent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)';
    curl_setopt($s, CURLOPT_HEADER, true);
    curl_setopt($curl,CURLOPT_URL,$url);    //The URL to fetch. This can also be set when initializing a session with curl_init().
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,TRUE); //TRUE to return the transfer as a string of the return value of curl_exec() instead of 
    curl_setopt($curl,CURLOPT_CONNECTTIMEOUT,5);    //The number of seconds to wait while trying to connect.    
    curl_setopt($curl, CURLOPT_USERAGENT, $userAgent);  //The contents of the "User-Agent: " header to be used in a HTTP request.
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE);   //To follow any "Location: " header that the server sends as part of the HTTP header.
    curl_setopt($curl, CURLOPT_TIMEOUT, 10);    //The maximum number of seconds to allow cURL functions to execute.
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);  //To stop cURL from verifying the peer's certificate.
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    $contents = curl_exec($curl);
    curl_close($curl);
    return $contents;
}
$resoruces = array( 'https://apis.google.com/js/plusone.js', 'https://connect.facebook.net/es_LA/all.js#xfbml=1&appId=121495767915738', 'https://assets.pinterest.com/js/pinit.js', 'http://platform.twitter.com/widgets.js' );

foreach($resoruces as $resource) {
    $result .= curl_file_get_contents($resource);
}
$result = file_put_contents('./js/cached/social.js', $result);
?>

问题是它仍然保留了许多不能用htaccess缓存的请求，因为它们是外部资源

所以我想我应该将它们都缓存在一个本地.js文件中，并使用这个文件，如下所示：

<script type="text/javascript">
    function sm_l() {      
       ! function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (!d.getElementById(id)) {
              js = d.createElement(s);
              js.id = id;
              js.src = "//platform.twitter.com/widgets.js";
              js.async = true;
              fjs.parentNode.insertBefore(js, fjs);
          }
      }(document, "script", "twitter-wjs");
      window.___gcfg = {
          lang: 'es'
      };
      (function() {
          var po = document.createElement('script');
          po.type = 'text/javascript';
          po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(po, s);
      })();
      (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s);
          js.id = id;
          js.async = true;
          js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=121495767915738";
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
      (function() {
          var po = document.createElement('script');
          po.type = 'text/javascript';
          po.async = true;
          po.src = '//assets.pinterest.com/js/pinit.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(po, s);
      })();

      $('#share_the_love').show();
      $('.social_media').slideDown();      
  }     
</script>

<?php
function curl_file_get_contents($url) {
    $curl = curl_init();
    $userAgent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)';
    curl_setopt($s, CURLOPT_HEADER, true);
    curl_setopt($curl,CURLOPT_URL,$url);    //The URL to fetch. This can also be set when initializing a session with curl_init().
    curl_setopt($curl,CURLOPT_RETURNTRANSFER,TRUE); //TRUE to return the transfer as a string of the return value of curl_exec() instead of 
    curl_setopt($curl,CURLOPT_CONNECTTIMEOUT,5);    //The number of seconds to wait while trying to connect.    
    curl_setopt($curl, CURLOPT_USERAGENT, $userAgent);  //The contents of the "User-Agent: " header to be used in a HTTP request.
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, TRUE);   //To follow any "Location: " header that the server sends as part of the HTTP header.
    curl_setopt($curl, CURLOPT_TIMEOUT, 10);    //The maximum number of seconds to allow cURL functions to execute.
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);  //To stop cURL from verifying the peer's certificate.
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 0);
    $contents = curl_exec($curl);
    curl_close($curl);
    return $contents;
}
$resoruces = array( 'https://apis.google.com/js/plusone.js', 'https://connect.facebook.net/es_LA/all.js#xfbml=1&appId=121495767915738', 'https://assets.pinterest.com/js/pinit.js', 'http://platform.twitter.com/widgets.js' );

foreach($resoruces as $resource) {
    $result .= curl_file_get_contents($resource);
}
$result = file_put_contents('./js/cached/social.js', $result);
?>

改为加载缓存文件：

<script type="text/javascript">
    function sm_l() {
        (function() {
            var po = document.createElement('script');
            po.type = 'text/javascript';
            po.async = true;
            po.src = '//funcook.com/js/cached/social.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(po, s);
        })();
        $('#share_the_love').show();
        $('.social_media').slideDown();
    }       
</script>

问题是twitter按钮似乎可以工作，但google+和facebook却不行

问题是，我在控制台中没有收到错误，甚至没有收到常见的facebook日志：

在这里测试它：

你知道我错过了什么吗

-编辑-

主要原因:

请尝试以下社交按钮代码：

function showSocialButtons() {
    var html =
    '<div id="social-buttons" class="fadeable fade">'
    + '<div class="fb-like" data-href="http://yourdomain.com" data-layout="box_count" data-width="50" ></div>'
    + '<div class="g-plusone-frame"><div class="g-plusone" data-size="tall" data-href="http://yourdomain.com"></div></div>'
    + '<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://yourdomain.com" data-text="urbanAsk - The addicting game of helping people find things." data-count="vertical">Tweet</a>'            
    + '</div>';
    document.getElementById('viewport').insertAdjacentHTML('beforeEnd', html);

    var script = document.createElement('script');
    script.async = true;
    script.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=121495767915738';
    document.getElementById('fb-root').appendChild(script);

    script = document.createElement('script');
    script.async = true;
    script.src = document.location.protocol + '//platform.twitter.com/widgets.js';
    document.getElementById('social-buttons').appendChild(script);

    script = document.createElement('script');
    script.async = true;
    script.src = document.location.protocol + '//apis.google.com/js/plusone.js';
    document.getElementById('social-buttons').appendChild(script);

    window.setTimeout(function () {
    document.getElementById('social-buttons').removeAttribute('class');
}, 4000);};

showSocialButtons();

演示：您好！问题是，我正在尝试合并所有这些.js文件并在本地缓存它，所以我使用唯一的和过期的缓存。您建议的仍然是没有过期缓存的外部资源。。无论如何，谢谢你抽出时间！我真的不认为在服务器上而不是客户端上缓存这些文件有什么意义。你希望从中得到什么？我不清楚…基本上，在pagespeed测试中获得更好的结果；同时减少http请求并能够设置这些文件的过期时间，我非常怀疑这是否真的有效果。如果G+的FB更改了文件内容，会发生什么情况？你不会认出那个人的。我也不清楚为什么要设置外部资源的过期时间。我会解决b每x缓存一个新副本的问题。这只是优化请求的问题，特别是针对移动设备，谢谢！如果我在jsfiddle中按TidyUp按钮，它会显示一条消息：document.write在jsfiddle环境中是不允许的，可能会弄坏您的小提琴。这是JSFIDLE中的一个已知问题：也许您应该尝试新的Stackoverflow特性：代码片段。