Blogger - get view counter's value with JavaScript?

Question

I am only able to fetch the value after HTML is finished loading by using this code:

var array = $('#Stats1_totalCount strong').map(function(){
    return $(this).text()
}).get();
var vcount = '';
for (i = 0; i < array.length; i++) { 
    vcount += array[i];
}
console.log(vcount);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="counter-wrapper graph-counter-wrapper" id="Stats1_totalCount">
  <span class="digit stage-0"><strong>1</strong></span>
  <span class="digit stage-0"><strong>2</strong></span>
  <span class="digit stage-0"><strong>3</strong></span>
  <span class="digit stage-0"><strong>4</strong></span>
  <span class="digit stage-0"><strong>5</strong></span>
</span>

But Blogger uses ajax to inject counter:

Counter and image will be injected later via AJAX call.

I tried using .ajaxStop and ajaxComplete, none of them works.
How can I get the view counter's value with JS?

Unless the counter API offers a callback you can hook to, you're pretty much stuck using a `setTimeout()` — Rory McCrossan, Dec 02 '16 at 14:23
@RoryMcCrossan, it does work but it is kinda stupid. The code needed to execute in `setTimeout` is delayed, it is not good. — Louis55, Dec 02 '16 at 14:29
You could use a MutationObserver, but this isn't supported in legacy browsers. See MDN for more info — Rory McCrossan, Dec 02 '16 at 14:30

score 0 · Accepted Answer · answered Dec 02 '16 at 14:45

Thanks for @RoryMcCrossan' s suggestion using MutationObserver, I am now able to get view counter's value with JavaScript!

(function startObservation() {
  var
    /* 1) Create a MutationObserver object*/
    observer = new MutationObserver(
      function(mutations) {      
      mutationObserverCallback(mutations);
    }),  
    /* 2) Create a config object */
    config = {childList: true};
 
  /* 3) Glue'em all */
  observer.observe(Stats1_totalCount, config);
})();
function mutationObserverCallback(mutations) {
  var mutationRecord = mutations[0];
  if (mutationRecord.addedNodes[0] !== undefined) {

  var array = $('#Stats1_totalCount strong').map(function(){
    return $(this).text()
  }).get();
  var vcount = '';
  for (i = 0; i < array.length; i++) { 
    vcount += array[i];
  }
  console.log(vcount);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="counter-wrapper graph-counter-wrapper" id="Stats1_totalCount">
  <span class="digit stage-0"><strong>1</strong></span>
  <span class="digit stage-0"><strong>2</strong></span>
  <span class="digit stage-0"><strong>3</strong></span>
  <span class="digit stage-0"><strong>4</strong></span>
  <span class="digit stage-0"><strong>5</strong></span>
</span>

Blogger - get view counter's value with JavaScript?

1 Answers1