jquery - Using JSONP to Create Blogger Site: Getting Failed to execute 'postMessage' on 'DOMWindow'

Question

I am getting:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://accounts.google.com') does not match the recipient window's origin ('https://www.blogger.com').

When running a blogger site using a template I purchased. The template makes extensive use of JSONP and calls JQuery v1.11.0.

Here is an example of a request:

if ( static_page_text === "[sitemap]" ) {
var postbody = $('.static_page .post-body');
$.ajax({
url: "/feeds/posts/default?alt=json-in-script",
type: 'get',
dataType: "jsonp",
success: function (dataZ) {
  var blogLabels = [];
  for (var t = 0; t < dataZ.feed.category.length; t++) {
    blogLabels.push(dataZ.feed.category[t].term);
  }
  var blogLabels = blogLabels.join('/');
  postbody.html('<div class="siteLabel"></div>');
  $('.static_page .post-body .siteLabel').text(blogLabels);
  var splabel = $(".siteLabel").text().split("/");
  var splabels="";
  for (get = 0; get < splabel.length; ++get) {
    splabels+= "<span>"+splabel[get]+"</span>";
  }
  $(".siteLabel").html(splabels);
  $('.siteLabel span').each(function() {
    var mapLabel = $(this);
    var mapLabel_text = $(this).text();
    $.ajax({
      url: "/feeds/posts/default/-/" + mapLabel_text + "?alt=json-in-script",
      type: 'get',
      dataType: "jsonp",
      success: function (data) {
        var posturl = "";
        var htmlcode = '<div class="mapp">';
        for (var i = 0; i < data.feed.entry.length; i++) {
          for (var j = 0; j < data.feed.entry[i].link.length; j++) {
            if (data.feed.entry[i].link[j].rel == "alternate") {
              posturl = data.feed.entry[i].link[j].href;
              break;
            }
          }
          var posttitle = data.feed.entry[i].title.$t;
          var get_date = data.feed.entry[i].published.$t,
              year = get_date.substring(0, 4),
              month = get_date.substring(5, 7),
              day = get_date.substring(8, 10),
              date = '<span class="day">' +  day.replace(/^0+/, '') + '</span><span class="month">' + text_month[parseInt(month, 10)] + ' </span><span class="year">' + year + '</span>';

          htmlcode += '<div class="mpost"><div class="map-date">' + date + '</div><h3 class="rcp-title"><a href="' + posturl + '">' + posttitle + '</a></h3></div>';
        }
        htmlcode += '</div>';
        mapLabel.replaceWith('<div class="maplabel"><h2>' + mapLabel_text + '<span class="butoo"><i class="fa fa-plus-circle"></i></span></h2>' + htmlcode + '</div>');
        $(document).on('click','.maplabel h2',function(){
          $(this).parent('.maplabel').addClass('active');
          $(this).find('.butoo .fa').removeClass('fa-plus-circle').addClass('fa-minus-circle');
        });
        $(document).on('click','.maplabel.active h2',function(){
          $(this).parent('.maplabel').removeClass('active');
          $(this).find('.butoo .fa').addClass('fa-plus-circle').removeClass('fa-minus-circle');
        });
      }
    });
  });
}
});
}

And here is the response I am getting:

It doesn't look like the headers are getting set but my understanding is that JSONP and JQuery handle that handshake?

Is there something else I need to be doing? I'd appreciate some friendly guidance.

Thanks in advance.

Answer 1

As the blog readership is set to Private, the feed URLs won't work. Setting it to Public ( Under Settings > Basic > Permissions > Blog Readers) will resolve this problem

Refer to https://support.google.com/blogger/answer/97933?hl=en

Site feeds don't work with private blogs.