Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Avoid document.write() di Lighthouse
Hi
ada yg bisa tolong bantu buat mengedit javascript yg saya pakai di template xml?
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;
var relmaxposts=5;
var numchars=135;
var morelink=" ";
var reljudul=new Array();
var relurls=new Array();
var relcuplikan=new Array();
var relgambar=new Array();
function saringtags(suchas,panjang)
{
var cuplik=suchas.split("<");
for(var i=0;
i<cuplik.length;
i++)
{
if(cuplik[i].indexOf(">")!=-1)
{
cuplik[i]=cuplik[i].substring(cuplik[i].indexOf(">")+1,cuplik[i].length)
}
}
cuplik=cuplik.join("");
cuplik=cuplik.substring(0,panjang-1);
return cuplik
}
function relpostimgthum(json)
{
for(var i=0;
i<json.feed.entry.length;
i++)
{
var entry=json.feed.entry[i];
reljudul[relnum]=entry.title.$t;
postcontent="";
if("content"in entry)
{
postcontent=entry.content.$t
}
else if("summary"in entry)
{
postcontent=entry.summary.$t
}
relcuplikan[relnum]=saringtags(postcontent,numchars);
if("media$thumbnail"in entry)
{
postimg=entry.media$thumbnail.url
}
else
{
postimg="https://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif"
}
relgambar[relnum]=postimg;
for(var k=0;
k<entry.link.length;
k++)
{
if(entry.link[k].rel=='alternate')
{
relurls[relnum]=entry.link[k].href;
break
}
}
relnum++
}
}
function contains(a,e)
{
for(var j=0;
j<a.length;
j++)if(a[j]==e)return true;
return false
}
function relatpost()
{
var tmp=new Array(0);
var tmp2=new Array(0);
var tmp3=new Array(0);
var tmp4=new Array(0);
for(var i=0;
i<relurls.length;
i++)
{
if(!contains(tmp,relurls[i]))
{
tmp.length+=1;
tmp[tmp.length-1]=relurls[i];
tmp2.length+=1;
tmp2[tmp2.length-1]=reljudul[i];
tmp3.length+=1;
tmp3[tmp3.length-1]=relcuplikan[i];
tmp4.length+=1;
tmp4[tmp4.length-1]=relgambar[i]
}
}
reljudul=tmp2;
relurls=tmp;
relcuplikan=tmp3;
relgambar=tmp4;
for(var i=0;
i<reljudul.length;
i++)
{
var informasi=Math.floor((reljudul.length-1)*Math.random());
var tempJudul=reljudul[i];
var tempUrls=relurls[i];
var tempCuplikan=relcuplikan[i];
var tempGambar=relgambar[i];
reljudul[i]=reljudul[informasi];
relurls[i]=relurls[informasi];
relcuplikan[i]=relcuplikan[informasi];
relgambar[i]=relgambar[informasi];
reljudul[informasi]=tempJudul;
relurls[informasi]=tempUrls;
relcuplikan[informasi]=tempCuplikan;
relgambar[informasi]=tempGambar
}
var rangkumanPosts=0;
var r=Math.floor((reljudul.length-1)*Math.random());
var rini=r;
var relhasil;
var dirURL=document.URL;
while(rangkumanPosts<relmaxposts)
{
if(relurls[r]!=dirURL)
{
relhasil="<li class='news-title clearfix'>";
relhasil+="<a href='"+relurls[r]+"' ><img src='"+relgambar[r]+"' alt='"+reljudul[r]+"'/></a>";
relhasil+="<a href='"+relurls[r]+"' alt='"+reljudul[r]+"'>"+reljudul[r]+"</a>";
relhasil+="<span class='news-text'>"+relcuplikan[r]+" ... <a href='"+relurls[r]+"' aria-label='"+reljudul[r]+"' target='_top'>"+morelink+"</a><span class='news-text'>";
relhasil+="</li>";
document.write(relhasil);
rangkumanPosts++;
if(rangkumanPosts==relmaxposts)
{
break
}
}
if(r<reljudul.length-1)
{
r++
}
else
{
r=0
}
if(r==rini)
{
break
}
}
}
/*]]>*/</script>
Itu sebagian potongan dari script bawaan di template saya, di lighthouse kode ini
document.write(relhasil); bikin blog saya ga lulus lighthiuse ..kira2 pengganti document.write apa ya?
Avoid document.write()
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.
Thanks
document.write(relhasil);
3 Jawaban:
<div>error relpostingthum : javascript-nya tidak lengkap. posting diatas untuk menunjukkan agar memodifikasi saja. yang ada tetap ada. function relpostingthum di perlukan oleh function relatpost (lihat code-nya)<br><br>error relatpost hapus yang di comment; tampaknya itu masih aktif. Jadi seperti ini saja</div><pre><ul id='relpost_img_sum'> <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul></pre><div><br>----------------------------------------------------------<br><br>Ganti signature function-nya biar lebih flexible</div><pre>function relatpost(targetElement) { // tambah variable var targetEl = document.getElementById(targetElement); var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for (var i = 0; i < relurls.length; i++) { if (!contains(tmp, relurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relurls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = reljudul[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relcuplikan[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relgambar[i] } } reljudul = tmp2; relurls = tmp; relcuplikan = tmp3; relgambar = tmp4; for (var i = 0; i < reljudul.length; i++) { var informasi = Math.floor((reljudul.length - 1) * Math.random()); var tempJudul = reljudul[i]; var tempUrls = relurls[i]; var tempCuplikan = relcuplikan[i]; var tempGambar = relgambar[i]; reljudul[i] = reljudul[informasi]; relurls[i] = relurls[informasi]; relcuplikan[i] = relcuplikan[informasi]; relgambar[i] = relgambar[informasi]; reljudul[informasi] = tempJudul; relurls[informasi] = tempUrls; relcuplikan[informasi] = tempCuplikan; relgambar[informasi] = tempGambar } var rangkumanPosts = 0; var r = Math.floor((reljudul.length - 1) * Math.random()); var rini = r; var relhasil; var dirURL = document.URL; while (rangkumanPosts < relmaxposts) { if (relurls[r] != dirURL) { relhasil = "<li class='news-title clearfix'>"; relhasil += "<a href='" + relurls[r] + "' ><img src='" + relgambar[r] + "' alt='" + reljudul[r] + "'/></a>"; relhasil += "<a href='" + relurls[r] + "' alt='" + reljudul[r] + "'>" + reljudul[r] + "</a>"; relhasil += "<span class='news-text'>" + relcuplikan[r] + " ... <a href='" + relurls[r] + "' aria-label='" + reljudul[r] + "' target='_top'>" + morelink + "</a><span class='news-text'>"; relhasil += "</li>"; //document.write(relhasil); rangkumanPosts++; if (rangkumanPosts == relmaxposts) { break } } if (r < reljudul.length - 1) { r++ } else { r = 0 } if (r == rini) { break } } // inject string-html targetEl.innerHTML = relhasil; }</pre><div><br>modifikasi yang di-html-nya agar sesuai dengan perubahan function.</div><pre><ul id='relpost_img_sum'> <!-- <script defer='defer' type='text/javascript'>relatpost();</script> --> <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul></pre><div><br>----------------------------------------------------------<br><br>Karena di-code tidak diketahui akan di element mana hasil string-html itu.<br>maka asumsi-nya di-body-element.<br><br>kira-kira seperti ini.<br><br></div><pre>//document.write(relhasil); document.body.innerHTML += relhasil;</pre><div><br>----------------------------------------------------------<br>kalau melihat sekilas code-nya. <br>sepertinya ini untuk meng-inject markup(string-html) ke dalam document html.<br>Ini bisa dilakukan pakai <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">innerHtml</a> atau meng-update DOM-nya (dengan menggunakan <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">createElement</a>). <br>Kebetulan code diatas pakai string-html jadi persammaan-nya lebih ke <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML">innerHTML</a> .<br>Lebih detailnya bisa baca <a href="https://www.sitepoint.com/insert-in-place-without-documentwrite/">Insert in place without document.write</a></div>
Tanggapan
kodenya udah saya update...kira2 yg diganti sebelah mananya ya gan? dan gimana? ane udah buka link referensinya tapi malah pusing
update jawaban.
<div>kayaknya disini gan HTML nya </div><pre> <div id='related_posts' style='margin-top:5px'><br> <h3>Related Articles :</h3><br><br> <b:loop values='data:post.labels' var='label'><br> <script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=999999&quot;' type='text/javascript'/><br> </b:loop><br> <ul id='relpost_img_sum'><br> <script defer='defer' type='text/javascript'>relatpost();</script><br> </ul><br> </div><br> </div><br> </b:if></pre>
Tanggapan
response pada jawaban diatas
<div>Hasil akhirnya jadi gini bukan gan? </div><pre><!--Related post--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style> #related_posts h3{color: #fff;font-size: 12px;background: #1A7C62;padding: 3px 10px;margin: 0 0 5px;} #relpost_img_sum{margin:0;padding:0;line-height:16px;font-size: 11px;} #relpost_img_sum:hover{background:0} #relpost_img_sum ul{list-style-type:none;margin:0;padding:0} #relpost_img_sum li{min-height: 74px;border-bottom: 1px solid #F4F3F3;list-style: none;margin: 0 0 5px;padding: 5px;} #relpost_img_sum .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size: 14px;} #relpost_img_sum .news-text{display:block;text-align:justify;font-weight:normal;text-transform:none;color:#333;font-size: 13px;} #relpost_img_sum img{float:left;margin-right:7px;border:solid 1px #ddd;width:72px;height:72px;background:#fff} </style> <script type='text/javascript'>/<![CDATA[function relatpost(targetElement) { // tambah variable var targetEl = document.getElementById(targetElement); var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for (var i = 0; i < relurls.length; i++) { if (!contains(tmp, relurls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relurls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = reljudul[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relcuplikan[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relgambar[i] } } reljudul = tmp2; relurls = tmp; relcuplikan = tmp3; relgambar = tmp4; for (var i = 0; i < reljudul.length; i++) { var informasi = Math.floor((reljudul.length - 1) * Math.random()); var tempJudul = reljudul[i]; var tempUrls = relurls[i]; var tempCuplikan = relcuplikan[i]; var tempGambar = relgambar[i]; reljudul[i] = reljudul[informasi]; relurls[i] = relurls[informasi]; relcuplikan[i] = relcuplikan[informasi]; relgambar[i] = relgambar[informasi]; reljudul[informasi] = tempJudul; relurls[informasi] = tempUrls; relcuplikan[informasi] = tempCuplikan; relgambar[informasi] = tempGambar } var rangkumanPosts = 0; var r = Math.floor((reljudul.length - 1) * Math.random()); var rini = r; var relhasil; var dirURL = document.URL; while (rangkumanPosts < relmaxposts) { if (relurls[r] != dirURL) { relhasil = "<li class='news-title clearfix'>"; relhasil += "<a href='" + relurls[r] + "' ><img src='" + relgambar[r] + "' alt='" + reljudul[r] + "'/></a>"; relhasil += "<a href='" + relurls[r] + "' alt='" + reljudul[r] + "'>" + reljudul[r] + "</a>"; relhasil += "<span class='news-text'>" + relcuplikan[r] + " ... <a href='" + relurls[r] + "' aria-label='" + reljudul[r] + "' target='_top'>" + morelink + "</a><span class='news-text'>"; relhasil += "</li>"; //document.write(relhasil); rangkumanPosts++; if (rangkumanPosts == relmaxposts) { break } } if (r < reljudul.length - 1) { r++ } else { r = 0 } if (r == rini) { break } } // inject string-html targetEl.innerHTML = relhasil; } /]]>/</script> </b:if> <!--end--></pre><div>Htmlnya<br><br></div><pre> <div id='related_posts' style='margin-top:5px'> <h3>Related Articles :</h3>
&lt;b:loop values='data:post.labels' var='label'&gt;
&lt;script expr:src='&amp;quot;/feeds/posts/summary/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=relpostimgthum&amp;amp;max-results=999999&amp;quot;' type='text/javascript'/&gt;
&lt;/b:loop&gt;
<ul id='relpost_img_sum'> <!-- <script defer='defer' type='text/javascript'>relatpost();</script> --> <script defer='defer' type='text/javascript'>relatpost('relpost_img_sum');</script> </ul> </div> </div> </b:if></pre><div>Chrome errornya seperti ini<br><figure data-trix-attachment="{"contentType":"image/jpeg","filename":"chrome.jpg","filesize":48400,"height":174,"url":"https://i.ibb.co/Sv7y5tx/chrome.jpg","width":997}" data-trix-content-type="image/jpeg" data-trix-attributes="{"presentation":"gallery"}" class="attachment attachment--preview attachment--jpg"><img src="https://i.ibb.co/Sv7y5tx/chrome.jpg" width="997" height="174"><figcaption class="attachment__caption"><span class="attachment__name">chrome.jpg</span></figcaption></figure></div>
Tanggapan
response di jawaban atas.