來自外部源的縮略圖不會出現在隨機帖子中小部件

Question

這是我的問題的jsfiddle。

http://jsfiddle.net/jaribhai/wncwqerj/1/

這是代碼。

// Feed configuration 
var homePage = 'http://video-testing-tahir.blogspot.com', 
    maxResults = 4, 
    summaryLength = 170, 
    noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png', 
    containerId = 'random-post-container'; 
// Function to generate random number limited from `min` to `max` 
// Used to create a valid and safe random feed `start-index` 
function getRandomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
// Function to shuffle arrays 
// Used to randomize order of the generated JSON feed 
function shuffleArray(arr) { 
    var i = arr.length, j, temp; 
    if (i === 0) return false; 
    while (--i) { 
     j = Math.floor(Math.random() * (i + 1)); 
     temp = arr[i]; 
     arr[i] = arr[j]; 
     arr[j] = temp; 
    } 
    return arr; 
} 
// Get a random start index 
function createRandomPostsStartIndex(json) { 
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); 
    if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
    // document .write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); 
    add_script(homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts'); 
} 
// Widget's main function 
function randomPosts(json) { 
    var link, summary, img, 
     ct = document.getElementById(containerId), 
     entry = shuffleArray(json.feed.entry), 
     skeleton = "<ul>"; 
    for (var i = 0, len = entry.length; i < len; i++) { 
     summary = ("summary" in entry[i]) ? (entry[i].summary.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : ""; 
     img = ("media$thumbnail" in entry[i]) ? entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c") : noImageUrl; 
     for (var j = 0, jen = entry[i].link.length; j < jen; j++) { 
      link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; 
     } 
     skeleton += '<li>'; 
     skeleton += '<img src="' + img + '" alt="" width="72" height="72">'; 
     skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>'; 
     skeleton += '<span>' + summary + '</span>'; 
// Show all post labels ... 
skeleton += ' <small>'; 
var tags = entry[i].category, 
    labels = []; 
for(var z = 0, zen = tags.length; z < zen; ++z) { 
    labels.push('<a href="' + homePage + '/search/label/' + encodeURIComponent(tags[z].term) + '?max-results=20" rel="tag">' + tags[z].term + '</a>'); 
} 
skeleton += labels.join(', '); 
skeleton += '</small>'; 
     skeleton += '<span class="clear"></span></li>'; 
    } 
    ct.innerHTML = skeleton + '</ul>'; 
} 
// document .write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>'); 
add_script(homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex'); 
function add_script(url) { 
    var s = document.createElement('script'); 
    s.src = url; 
    document.getElementsByTagName('head')[0].appendChild(s); 
} 

這是來自博主的隨機帖子部件演示。它僅顯示來自博客鏈接的圖像的縮略圖，但不顯示從外部來源鏈接的圖像的縮略圖。 我該怎麼做才能讓來自外部主機的圖像也出現在縮略圖中。

Answer 1

由於圖片是在外部託管的，因此它不會出現在Feed的media$thumbnail字段中。我們將不得不解析帖子的HTML內容以提取圖片的網址。需要做兩處更改才能完成此工作 -

首先從summary供稿源切換到default供稿網址。這對於獲取該帖子的HTML內容是必要的（summary提要只包含帖子的有限摘要文本而不是完整的HTML）。的

/feeds/posts/summary?alt=json-in-script 

每個實例更改爲

/feeds/posts/default?alt=json-in-script 

其次更改條件從

​​

到

if ("media$thumbnail" in entry[i]) { 
    img = entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c"); 
} else if (entry[i].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)) { 
    img = entry[i].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)[1]; 
} else { 
    img = noImageUrl; 
} 

參考工作在後發現圖像下面的例子 -

// Feed configuration 
 
var homePage = 'http://video-testing-tahir.blogspot.com', 
 
    maxResults = 4, 
 
    summaryLength = 170, 
 
    noImageUrl = 'http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png', 
 
    containerId = 'random-post-container'; 
 

 
// Function to generate random number limited from `min` to `max` 
 
// Used to create a valid and safe random feed `start-index` 
 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
} 
 

 
// Function to shuffle arrays 
 
// Used to randomize order of the generated JSON feed 
 
function shuffleArray(arr) { 
 
    var i = arr.length, 
 
    j, temp; 
 
    if (i === 0) return false; 
 
    while (--i) { 
 
    j = Math.floor(Math.random() * (i + 1)); 
 
    temp = arr[i]; 
 
    arr[i] = arr[j]; 
 
    arr[j] = temp; 
 
    } 
 
    return arr; 
 
} 
 

 
// Get a random start index 
 
function createRandomPostsStartIndex(json) { 
 
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults)); 
 
    if (window.console && window.console.log) console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults)); 
 
    // document .write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); 
 
    add_script(homePage + '/feeds/posts/default?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts'); 
 
} 
 

 
// Widget's main function 
 
function randomPosts(json) { 
 
    var link, summary, img, 
 
    ct = document.getElementById(containerId), 
 
    entry = shuffleArray(json.feed.entry), 
 
    skeleton = "<ul>"; 
 
    for (var i = 0, len = entry.length; i < len; i++) { 
 
    summary = ("content" in entry[i]) ? (entry[i].content.$t.replace(/<.*?>/g, "")).substring(0, summaryLength) + '&hellip;' : ""; 
 
    if ("media$thumbnail" in entry[i]) { 
 
     img = entry[i].media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s72-c"); 
 
    } else if (entry[i].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)) { 
 
     img = entry[i].content.$t.match(/\<img.+src\=(?:\"|\')(.+?)(?:\"|\')(?:.+?)\>/)[1]; 
 
    } else { 
 
     img = noImageUrl; 
 
    } 
 
    for (var j = 0, jen = entry[i].link.length; j < jen; j++) { 
 
     link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#'; 
 
    } 
 
    skeleton += '<li>'; 
 
    skeleton += '<img src="' + img + '" alt="" width="72" height="72">'; 
 
    skeleton += '<a href="' + link + '">' + entry[i].title.$t + '</a><br>'; 
 
    skeleton += '<span>' + summary + '</span>'; 
 

 

 

 
    // Show all post labels ... 
 
    skeleton += ' <small>'; 
 
    var tags = entry[i].category, 
 
     labels = []; 
 
    for (var z = 0, zen = tags.length; z < zen; ++z) { 
 
     labels.push('<a href="' + homePage + '/search/label/' + encodeURIComponent(tags[z].term) + '?max-results=20" rel="tag">' + tags[z].term + '</a>'); 
 
    } 
 
    skeleton += labels.join(', '); 
 
    skeleton += '</small>'; 
 

 

 

 
    skeleton += '<span class="clear"></span></li>'; 
 
    } 
 
    ct.innerHTML = skeleton + '</ul>'; 
 
} 
 

 
// document .write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>'); 
 
add_script(homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex'); 
 

 

 
/** 
 
* `document[dot]write` is disallowed in JSFiddle envioriment and might break your fiddle. 
 
*/ 
 

 
function add_script(url) { 
 
    var s = document.createElement('script'); 
 
    s.src = url; 
 
    document.getElementsByTagName('head')[0].appendChild(s); 
 
}

body { 
 
    margin: 0; 
 
    padding: 50px; 
 
    background-color: white; 
 
    font: normal normal 11px/1.4 Arial, Sans-Serif; 
 
    color: black; 
 
} 
 
#random-post-container { 
 
    width: 400px 
 
} 
 
#random-post-container ul, 
 
#random-post-container li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    overflow: hidden; 
 
} 
 
#random-post-container img { 
 
    display: block; 
 
    float: left; 
 
    border: 1px solid; 
 
    margin: 2px 7px 5px 0; 
 
} 
 
#random-post-container a { 
 
    font-weight: bold; 
 
    font-size: 110%; 
 
} 
 
#rancom-post-container .clear { 
 
    display: block; 
 
    clear: both; 
 
}

<h2>Random Post</h2> 
 
<div id='random-post-container'>Memuat&hellip;</div>