-3
J'ai une page Web dans laquelle je lis la catégorie du blog Google Blogger à partir de son flux à l'aide de JSON. J'ai deux fonctions. Tout d'abord, on obtient toutes les catégories de blogs et la deuxième prend les catégories de blogs et ensuite frapper à nouveau Blog pour obtenir les derniers messages de cela C'est le test de texte pour voir que les données de la page Web est ici ou non.document.write() Supprime tout le contenu de la page lors de l'appel après chargement de la page
<div id="blogCategoriesList">
<script type="text/javascript">
var blogurl = "https://googleblog.blogspot.com/";
function blogCatList(json) {
document.write('<select onchange="showThisCatPosts(this.value)">');
document.write('<option>CHOOSE A CATEGORY</option>');
for (var i = 0; i < json.feed.category.length; i++)
{
var item = "<option value='" + json.feed.category[i].term + "'>" + json.feed.category[i].term + "</option>";
document.write(item);
}
document.write('</select>');
}
document.write('<script type=\"text/javascript\" src=\"' + blogurl + '/feeds/posts/default?redirect=false&orderby=published&alt=json-in-script&callback=blogCatList&max-results=500\"><\/script>');
document.write('<br/><br/><a href=\"' + blogurl + '\" target=\"_blank\" class=\"footerLINK\">Read The Blog Online Now<\/a>');
</script>
</div>
<div id="blogCategoriesPost">
<script style='text/javascript'>
var blogurl = "https://googleblog.blogspot.com/";
var numposts = 10; // Out Of 500
var displaymore = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
function blogCategoriesPost(json) {
if(json.feed.entry.length < numposts){
numposts = json.feed.entry.length;
}
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<div id="mainDIV">');
document.write('<h2 class="post_heading">' + posttitle + '</h2>');
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, ""); // Will Show Only Text Instead Of HTML
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write('<span class="post_summary">');
document.write(postcontent);
document.write('</span>');
} else {
//document.getElementById("catPosts").innerHTML += '<span class="post_summary">';
document.write('<span class="post_summary">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>');
}
}
var towrite = '';
document.write('<strong class="post_footer">');
if (showpostdate == true) {
towrite = 'Published On: ' + towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear;
}
if (showcommentnum == true) {
if (commenttext == '1 Comments') commenttext = '1 Comment';
if (commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '<br/><a href="' + commenturl + '" target ="_blank">' + commenttext + '</a>';
towrite = towrite + commenttext;
}
if (displaymore == true) {
towrite = towrite + '<br/><a href="' + posturl + '" target="_blank">Read Full Article --></a>';
}
document.write(towrite);
document.write('</strong></div>');
}
}
function showThisCatPosts(BLOGCAT){
document.write('<script type=\"text/javascript\" src=\"' + blogurl + '/feeds/posts/default/-/' + BLOGCAT + '?redirect=false&orderby=published&alt=json-in-script&callback=blogCategoriesPost&max-results=500\"><\/script>');
document.write('<a href=\"' + blogurl + '\" target=\"_blank\" class=\"footerLINK\">Read The Blog Online Now<\/a>');
}
</script>
Vous pouvez voir une démo fonctionnelle à JSBIN. Mon problème est que lors du chargement de la page, il fonctionne parfaitement en affichant toutes les données de page et les listes de catégories de blog mais quand je sélectionne une catégorie, toutes mes données de page sont supprimées et seuls les messages d'étiquettes sont visibles. Pourquoi cela se passe-t-il ... ??? Je veux juste changer les messages selon l'étiquette pour ne pas enlever toutes les données de la page ...
Voici comment le travail document.write, istead de l'utilisation de documents d'écriture DOM createElement et appendChild ou utilisent jQuery. – jcubic
C'est le comportement normal. –
Vous devez utiliser 'document.open()' d'abord et à la fin 'document.close()'. Au fait, utiliser 'document.write()' n'est pas toujours une bonne idée. Il y a de meilleurs moyens. – reporter