We are currently developing a program that uses HTML and JavaScript to retrieve information about new articles from RSS on news sites, display thumbnails of these articles in force layout using d3.js, and link nodes to articles.
Currently, we have obtained five new articles from each of the two RSSs, and we have created a program to display based on the information on the Internet.
<head>
<script src="https://www.google.com/jsapi" type="text/javascript">/script>
<script type="text/javascript">
google.load("feeds", "1");
var FA = new Array(
"http://rss.dailynews.yahoo.co.jp/fc/rss.xml",
"http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=h"
);
function initialize() {
var feedsArr = new Array();
var numEntr = 5;
var container= document.getElementById("feed");
varcnt = FA.length;
for (vark=0;k<FA.length;k++) {
varfeed = new google.feeds.feed(FA[k]);
feed.setNumEntries(numEntr);
feed.setResultFormat (google.feed.feed.JSON_FORMAT); // Shaped to JSON format
feed.load(function(result){
if(!result.error){
for (vari=0;i<result.feed.entries.length;i++) {
variable=result.feed.entries[i];
vareimg="";
varimgCheck=entry.content.match(/(http:){1}[\S_-]+(\.png)|(\.jpg)|(\.JPG)|(\.gif))/);
if(imgCheck){
eimg+=imgCheck[5];
} else{
eimg+="http://design-ec.com/d/e_others_50/l_e_others_500.png";
}
var attributes=["title", "link", "publishedDate", "contentSnippet";
varind = feedsArr.length;
feedsArr [ind] = new Array();
feedsArr[ind][0] = Date.parse(entry[attributes[2]]);
feedsArr[ind][1] = entry [attributes[1]]; // link
feedsArr[ind][2] = entry [attributes[2]]; // publishedDate
feedsArr[ind][3] = entry [attributes[3]]; // contentSnippet
feedsArr[ind][4] = entry [attributes[0]]; // title
feedsArr[ind][5] = result.feed.title;// site title
feedsArr[ind][6] = eimg;//thumbnail
}
}
cnt--;
if(cnt==0){
feedsArr.sort();
feedsArr.reverse();
for(varj=0;j<feedsArr.length;j++){
varaE= document.createElement("A");
var h3 = document.createElement("H3");
varp = document.createElement("P");
varspanD= document.createElement("SPAN");
aE.href=aE.title=feedsArr[j][1];
aE.appendChild( document.createTextNode(feedsArr[j][4]));
h3.appendChild(aE);
spanD.appendChild( document.createTextNode(feedsArr[j][2]));
spanD.appendChild( document.createTextNode("("+feedsArr[j][5]+")"));
p.appendChild( document.createTextNode(feedsArr[j][3]));
p.appendChild(spanD);
container.appendChild(h3);
container.appendChild(p);
varimg_link = document.createElement("img");
img_link.setAttribute("src", feedsArr[j][6]);
img_link.setAttribute("width", "100");
container.appendChild(img_link);
}
}
});
}
}
google.setOnLoadCallback(initialize);
</script>
<body>
<divid="feed"></div>
</body>
</head>When I run this program, an article is displayed, and I would like to express it using the force model.
I've encountered some problems and I'm in a very difficult situation right now.
The development environment is Eclipse, and we are trying to use HTML and JavaScript.
I myself think there are many things that are not very good because this program is the first time to create from 1.If you don't mind, please help me.Thank you for your cooperation.
2, The above program is programmed to set the image information on the RSS to thumbnail, but the RSS you are referring to does not have thumbnail information.How do I get the image from the url article on the link as a thumbnail?
Google News only
http://news.google.com/news?hl=ja&ned=us&ie=UTF-8&oe=UTF-8&output=rss&topic=h
Thumbnails are embedded (some omitted) as follows:
<img xmlns="http://www.w3.org/1999/xhtml" width="80" border="1"
height="80" alt=""
src="//t3.gstatic.com/images?q=tbn:ANd9GcQ_hY6_-..."/>
The URL with no schema specified in the src attribute is equivalent to a thumbnail.Therefore, I will do the following.
varimgCheck=entry.content.match(/<img.+?src=\"\/\/(.+?\/images\?q=.+?);
if(imgCheck){
eimg+="http://"+imgCheck[1];
} else{
eimg+="http://design-ec.com/d/e_others_50/l_e_others_500.png";
}
On the other hand, the RSS on Yahoo! News Topics does not record the thumbnail URL.Therefore, you must access the URL of each topic to add the action to retrieve the thumbnail.
I wrote that, but JavaScript has HTTP access control (CORRS), so
For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.
JavaScript alone is difficult to deal with, for example, the service server needs to prepare CGI for thumbnail retrieval.
© 2024 OneMinuteCode. All rights reserved.