Mengatasi Infinite Scroll Blogger yang Error di Mobile

Masalah infinite scroll yang tidak bekerja (error) di tampilan mobile sebetulnya sudah cukup lama saya menyadarinya. Tetapi baru saat ini saya coba mencarikan solusi untuk mengatasi hal tersebut. Fitur infinite scroll menjadi tidak bekerja sebagaimana mestinya saat website dibuka dengan URL mobile. URL mobile di Blogger biasanya ditandai dengan akhiran ?m=1.

Sebagai informasi, widget infinite scroll yang terpasang di blog ini adalah onclick event, yang akan memuat halaman terlama dengan mengklik tombol Load More.

Adapun pesan error yang muncul (di console) saat mengklik tombol loadmore, kurang lebih sebagai berikut:

Mixed Content: The page at 'https://www.bungfrangki.com/?m=1' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.bungfrangki.com/search?updated-max=2023-02-17T20:34:00%2B07:00&max-results=8&m=1'. This request has been blocked; the content must be served over HTTPS.

Dan solusinya dapat memilih salah satu dari 2 cara berikut ini.

Cara Mengatasi Infinite Scroll Blogger yang Error di Perangkat (URL) Mobile

Cara 1

Solusi pertama adalah dengan menambahkan meta tag khusus di blog. Silahkan copy dan paste kode meta tag berikut ini di atas </head> template Blogspot Anda.

<meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy" />

Cara 2

Atau, solusi lainnya adalah silahkan menambahkan JavaScript berikut ini. Letakkan di atas </body> pada template Blogspot masing-masing.

<script>
//<![CDATA[
window.addEventListener("load", (event) => {
if (window.location.protocol.indexOf('https') == 0){
  var lm = document.createElement('meta');
  lm.setAttribute('http-equiv', 'Content-Security-Policy');
  lm.setAttribute('content', 'upgrade-insecure-requests');
document.getElementsByTagName('head')[0].appendChild(lm);
} 
});
//]]>
</script>

Perhatian:
Cukup menggunakan salah satu dari dua cara di atas. Agar tidak mubazir. Mengingat dua cara di atas memiliki fungsi dan output yang sama.

Update 31 Agustus 2024:

Cara 3 (mempertahankan XMLHttpRequest)

Alih-alih mengganti metode untuk retrive data dengan fetch, Anda bisa coba pertahankan tetap menggunakan XMLHttpRequest, dengan tambahan function force URL to HTTPS.

Ganti JavaScript Blogger Infinite Scroll dengan kode di bawah ini.

<script>
//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function f(){return L.innerHTML=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l("loading",[p]),void u(y,function(t,n){M.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+j+'"></span>'),h=e.createElement("div");for(var f=0,u=a.length;u>f;++f)h.appendChild(a[f]);d.insertAdjacentHTML("afterend",h.innerHTML),c(),y=i.length?i[0].href:!1,T=!1,j++,l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l("error",[p,t,e])})):(M.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function c(t){if(L.innerHTML="",v){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(v=!1),f(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){function secureUrl(getUrl) {try {let parsedUrl = new URL(getUrl);if (parsedUrl.protocol === 'http:') {parsedUrl.protocol = 'https:';}return parsedUrl.href;} catch (error) {console.error('Not expected URL:', getUrl, error);return getUrl; }}const url = secureUrl(e);var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o);history.pushState('','',url)}},o.open("GET",url),o.send()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacentHTML("afterbegin",'<!--<span class="fi" id="#fi:0"></span>-->'),h=e.createElement("div"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E>w+b||f()};A(),0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
    type: 0,
    target: {
        posts: '.blog-posts',
        post: '.post-outer-container',
        anchors: '.blog-pager',
        anchor: '.load-more-btn'
    },
    text: {
        load: '<button class=\"load-more-btn\">Load More</button>',
        loading: '<span class=\"loading-btn\">Memuat <span>&#9696;</span></span>',
        loaded: '<span class=\"all-posts-showing\"></span>',
        error: 'null, refresh this page'
    }
});
//]]>
</script>

Tambahan informasi, JavaScript di atas juga sudah disertakan history.pushState untuk merubah URL di bilah alamat peramban (address bar).

Cara 4 (pakai Fetch)

Biar lebih modern, Anda dapat menggunakan Blogger Infinite Scroll yang untuk retrive data pakai metode fetch.

Silahkan mengganti JavaScript Infinite Scroll sebelumnya dengan JS di bawah ini:

<script>
//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}
function o(t){return void 0!==t}
function a(t){return"function"==typeof t}
function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}
function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}
function d(t,e){o(e)?delete g[t][e]:g[t]=[]}
function l(t,e){if(o(g[t])){for(var n in g[t]){g[t][n](e)}}}
function f(){L.innerHTML=p.text.loading;T=!0;if(y){M.classList.add(p.state.loading);l("loading",[p]);u(y,function(t,n){M.className=x+" "+p.state.load;h=e.createElement("div");h.innerHTML=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o;d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+j+'"></span>');h=e.createElement("div");for(var f=0,u=a.length;u>f;++f){h.appendChild(a[f])}
d.insertAdjacentHTML("afterend",h.innerHTML);c();y=i.length?i[0].href:!1;T=!1;j++;l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error);T=!1;c(1);l("error",[p,t,e])})}else{M.classList.add(p.state.loaded);L.innerHTML=p.text.loaded;l("loaded",[p])}}
function c(t){L.innerHTML="";if(v){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){if(2===p.type){v=!1}
f();return!1};L.appendChild(e)}}
var defaultSettings={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:"infinite-scroll-state-load",loading:"infinite-scroll-state-loading",loaded:"infinite-scroll-state-loaded",error:"infinite-scroll-state-error"},type:0};var g={load:[],loading:[],loaded:[],error:[]};var p=i(defaultSettings,n||{});p.on=s;p.off=d;var h=null;var u=function(url,onSuccess,onError){
function secureUrl(getUrl) {
    try {
        let parsedUrl = new URL(getUrl);

        if (parsedUrl.protocol === 'http:') {
            parsedUrl.protocol = 'https:';
        }
        return parsedUrl.href;
    } catch (error) {
        console.error('Invalid URL:', getUrl, error);
        return getUrl;
    }
}
let nextUrl = secureUrl(url);
fetch(nextUrl).then(response=>{if(!response.ok)throw response;return response.text()}).then(text=>{onSuccess&&a(onSuccess)&&onSuccess(text)}).catch(err=>{onError&&a(onError)&&onError(err)})};var v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href;H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>');h=e.createElement("div");c();var A=function(){E=H.offsetTop+H.offsetHeight;b=t.innerHeight;w=m.scrollTop||M.scrollTop;T||E>w+b||f()};A();0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,1000))},!1)}
return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
    type: 0,
    target: {
        posts: '.blog-posts',
        post: '.post-outer-container',
        anchors: '.blog-pager',
        anchor: '.load-more-btn'
    },
    text: {
        load: '<button class=\"load-more-btn\">Load More</button>',
        loading: '<span class=\"loading-btn\">Memuat <span>&#9696;</span></span>',
        loaded: '<span class=\"all-posts-showing\"></span>',
        error: 'null, refresh this page'
    }
});
//]]>
</script> 

Sebagai informasi, JavaScript di atas dasarnya masih menggunakan konstruksi dari miliknya DTE :], Taufik Nurrohman. Hanya coba dirubah sedikit.

Demikian, semoga membantu dan bermanfaat.

JavaScript Blogger Infinite Scroll: https://dte.web.id/teknis/blogger-infinite-scroll