- 締切済み
特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、
特定のページの画像ＵＲＬ一覧表示をしようと思っているのですが、 何が原因なのか解らず困っています。 <html> <head> <script> function load(){ var req = new XMLHttpRequest(); req.open("GET", "http://news.google.co.jp/nwshp?hl=ja&tab=wn", false); req.onreadystatechange = function(){ if(4 == req.readyState){ set_news(req.responseXML); } }; req.send(null); } function set_news(xml){ var container = document.getElementById("news"); container.innerHTML = ""; var items = xml.getElementsByTagName("img"); for(var i = 0; i < items.length; i++){ var a = document.createElement("a"); a.href = items[i].getAttribute("src"); a.innerHTML = items[i].getAttribute("src"); container.appendChild(a); } } </script> </head> <body onLoad="load();"> <div id="news"></div> </body> </html> 上記はgoogleの画像ＵＲＬ一覧を取得しようと思っています。 この場合、何が悪いのでしょうか？ ご教示宜しくお願いいたします。
- zengshan
- お礼率0% (0/4)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
たびたびどうも、 よくよく見ると、そもそも http://news.google.co.jp/nwshp?hl=ja&tab=wn これはXMLじゃないですね。 req.responseHTML使えば、ほぼ、そのままローカルでできましたよ！ <script type="text/javascript"> function load(){ var req = new XMLHttpRequest(); req.open("GET", "http://news.google.co.jp/nwshp?hl=ja&tab=wn", false); req.onreadystatechange = function(){ if(4 == req.readyState){ set_news(req.responseText); } }; req.send(null); } function set_news(xml){ //debug用 var outstr=xml.entitize(); outstr=outstr.replace(">",">\n",'g'); document.getElementById("debug").innerHTML=outstr; // var container = document.getElementById("news"); container.innerHTML = ""; var div=document.createElement('div') div.innerHTML =xml; var items = div.getElementsByTagName("img"); for(var i = 0; i < items.length; i++){ var a = document.createElement("a"); a.href = items[i].getAttribute("src"); a.innerHTML = items[i].getAttribute("src"); container.appendChild(a); } } //debug用 String.prototype.entitize = function() { var str = "" + this; str = str.split("&").join("&"); str = str.split("<").join("<"); str = str.split(">").join(">"); str = str.split('"').join("""); str = str.split("{").join("{"); str = str.split("}").join("}"); str = str.split("'").join("'"); return str; } </script> </head> <body> <button onclick='load();'>Load</button> <div id="news"></div> <pre id="debug"></pre> </body>
- yyr446
- ベストアンサー率65% (870/1330)
ローカル環境でやるなら、どうせIEだけと限定して、 Ms Jscript で new ActiveXObject("Microsoft.XMLDOM"); を使えば、いかがでしょうか？ http://www.sm.rim.or.jp/~shishido/htajax.html
補足
・・・ＩＥだけは是非とも外したいブラウザなのです。
- yyr446
- ベストアンサー率65% (870/1330)
GoogleのNewsを自分で検索して、検索結果から何かを自分で抜きたい ＝＝＞そんなあなたにお勧めは 「Google AJAX Search API 」のNews検索です。 http://code.google.com/intl/ja/apis/ajaxsearch/ 抜粋 「このAPIではシンプルな RESTful インターフェースで、どの場合でもサポートされる メソッドは GET で、応答の形式は、ステータスコードが埋め込まれた JSON エンコード された結果です。」 http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_intro_fonje 要するに、 http://ajax.googleapis.com/ajax/services/search/news に、パラメーターを付けてリクエストするとJSONPで結果を返してくれる という事です。 詳しくはリファレンスのページを参考にしてね。 http://code.google.com/intl/ja/apis/ajaxsearch/documentation/reference.html#_class_GnewsSearch ※できるかなあー ！ あんなこといいね、できたらいいね♪
補足
目的の機能とは大分違うようです・・・ ローカルＰＣからだとどのサイトのＲＳＳの値も取得出来るのですが、 何故ＨＴＭＬだと取得できないのでしょう・・・？
- yyr446
- ベストアンサー率65% (870/1330)
もろに、クロスドメインアクセスじゃないっすか！ それとも、あなたグーグルの方ですか
補足
自分のローカルマシンから取得する場合もクロスドメインになるのでしょうか？ そこらへんの記述が無くて困っています。
関連するQ&A
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- Scriptを読み込み中の表示について
HTML <script language="JavaScript" type="text/javascript" src="AAA.js"></script> 外部JS <!-- google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSURL"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("mini_feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var div = document.createElement("div"); var entry = result.feed.entries[i]; var dd = new Date(entry.publishedDate); // now var yearNum = dd.getYear(); if (yearNum < 2000) yearNum += 1900; var date = yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日"; container.innerHTML += "<div>【"+"<b>" + date+"</b>" +"】<br /><a href='" + entry.link + "'>" + entry.title + "</a></div>"; } } }); } google.setOnLoadCallback(initialize); //--> を設置し、RSSをスクリプトで表示しています。 2秒くらい読込みが遅いので、その部分が、一時空白状態のままになります。 そこで、読み込み中に読込みしていますというぐるぐる回る画像を表示したいのですが、どのように記述すれば宜しいのでしょうか？
- ベストアンサー
- JavaScript
- RSSで取得したURLに文字列を追加と配置？
現在googleのAPIを使いRSSからURLと画像を取得しています。 それで質問なんですが、その取得した(それぞれの)URL末尾に指定した同一の英数字を付加と、 表示する画像のレイアウト(現在は縦一列表示)を４×4とかにしたいとですがうまく出来ません>< 複数のURLだと、どの段階で？？どう振り当てて組み込んだら良いのか？？ レイアウトもＣＳＳで試みましたが一括で処理されるので途中で区切っての配置が出来ず；； 複数の画像だとどうやって振り当てていくのかが判りません>< 初心者で申し訳ありませんがよろしく願いします。<m(__)m> <script type="text/javascript" src="googleのapiキー"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("RSSのURL"); feed.setNumEntries(16); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) {var entry = result.feed.entries[i] ; var gazo = entry.content.match("<img.*jpg.*?>") if(gazo != null){container.innerHTML += "<p><a href='" + entry.link + "'>" + gazo +"</a></p>" } var div = document.createElement("div"); container.appendChild(div); } } }); } google.setOnLoadCallback(initialize); </script> <body onload="OnLoad()"> <div id="feed" ></div>
- ベストアンサー
- JavaScript
- scriptリンクの別画面表示
はじめまして。 ホームページのトップにブログの件名をニュースとして一覧表示したくて Google AJAX Feed API を利用しました。 表示自体はうまくいったのですが、 この記事へのリンクを別ウィンドウで開くようにするにはどうすればいいのでしょうか？ 当方、JavaScriptは全く分からずで困っております・・・ おわかりの方、いらっしゃいましたらよろしくお願いいたします。 【html header 部分】 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("http://blog.XXXXX.XXX"); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var li = document.createElement("li"); var a = document.createElement("a"); a.href = entry.link ; var date = new Date(entry.publishedDate); var titlelink = entry.title; a.appendChild(document.createTextNode( "・" + date.toDateString() + " " +titlelink)); li.appendChild(a); container.appendChild(li); } } }); } google.setOnLoadCallback(initialize); </script> 【html body 部分】 <div id="feed"></div> 以上、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- 現在、サムネイル一覧を表示させておいて、そのサムネイルをクリックすると
現在、サムネイル一覧を表示させておいて、そのサムネイルをクリックすると、左側の拡大写真がクリックしたサムネイルのものに切り替わるイメージギャラリーを作成しています。 なぜか、IE6でのみで「エラー：オブジェクトがありません」となります。エラーは「if(description.firstChild.nodeType == 3){ 」の部分で発生しています。 どうも原因が分らずに困っています。 何か分る方がいらっしゃれば、ソースを以下にのせておくので、アドバイスを頂けないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> function prepareGallery(){ if(!document.getElementsByTagName || !document.getElementById) return false; if(!document.getElementById("imagegallery")) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for(var i=0; i<links.length; i++){ links[i].onclick = function(){ return showPic(this); } } } function showPic(whichpic){ if(!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); if(placeholder.nodeName != "IMG") return true; placeholder.setAttribute("src",source); if(!document.getElementById("description")) return false; var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title"):""; var description = document.getElementById("description"); if(description.firstChild.nodeType == 3){ description.firstChild.nodeValue = text; } return false; } function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != 'function'){ window.onload = func; }else{ window.onload = function(){ oldonload(); func(); } } } addLoadEvent(prepareGallery); </script> </head> <body> <div class="Area03_l"> <img src="sample01.jpg" id="placeholder" alt="サンプル01"><br> <div id="description">サンプル01</div> </div> <table border="0" cellspacing="3" cellpadding="0" class="photo_table" id="imagegallery"> <tr> <td><a href="sample01.jpg" title="サンプル01"><img src="sample01_thum.jpg" alt="サンプル01"></a></td> <td><a href="sample02.jpg" title="サンプル02"><img src="sample02_thum.jpg" alt="サンプル02"></a></td> </tr> </table> </body></html>
- ベストアンサー
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryで画像を表示しようとすると表示しない
textに画像を指定したのですが、そのままタグが表示されてしまい画像が表示されません。 色々いじってみたものの表示されなかったりして、どうしたらいいのかわかりません。 よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ var nCnt = 1; var nMax = 6; $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ if(nCnt <= nMax) { $("<li/>",{ text : '<img src="images/test.jpg" width="68" height="14">'+items.category+' '+items.date+' '+items.content, 'class' : items.category, }).appendTo('#portfolio'); } nCnt++; }); }); }); </script>
- 締切済み
- JavaScript
- 【javascript】ロールオーバーと画像自動切換えがバッティングし
【javascript】ロールオーバーと画像自動切換えがバッティングして、ロールオーバーがきいていません。 javascriptは該当の動作がどれかというのが分かる程度で、書く事も修正する事もできません。 ロールオーバーが正常に動いていたページに画像自動切換えのスクリプトを設置したところ、ロールオーバーが動かなくなりました。 ページの遷移に問題はないのですが、他ページでは出来ているので何とかしたいと思っています。どうかお助け下さい。 ≪ロールオーバー≫ function initRollovers() { if (!document.getElementById) return var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName('img'); for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == 'imgover') { var src = aImages[i].getAttribute('src'); var ftype = src.substring(src.lastIndexOf('.'), src.length); var hsrc = src.replace(ftype, '_o'+ftype); aImages[i].setAttribute('hsrc', hsrc); aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc; aImages[i].onmouseover = function() { sTempSrc = this.getAttribute('src'); this.setAttribute('src', this.getAttribute('hsrc')); } aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype); this.setAttribute('src', sTempSrc); } } } } ≪画像切り替え≫ window.onload = function(){ var num = 1; setInterval(function(){ document.getElementById('link' + num).style.display = 'none'; num = document.getElementById('link' + (num+1))? ++num : 1; document.getElementById('link' + num).style.display = 'block'; },7500); }
- ベストアンサー
- JavaScript
- javascriptからURLに含まれる日本語のクエリを渡す方法
外部ドメインのURLをjavascriptからcgiに渡して、帰ってきた結果をjavascriptで受け取るAjaxのプログラムなのですが、 UTF8でURLエンコーディングされた日本語を引数としてcgiに渡す時に「16進数で記述してください」というjavascriptのエラーが出て実行されません。 javascriptから日本語のクエリをうまく渡せる記述方法はありませんでしょうか。 下は「東京地裁」の場合です。 http://d.hatena.ne.jp/keyword/%c5%ec%b5%fe%c3%cf%ba%db?mode=rss クライアント側javascript全文は以下の通りです。エラーの箇所は6行目です。 <div id="rss_field" style="border:1px solid red; background:#f99">LOADING...</div><script> window.onload = function(){ var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); s.type = "text/javascript"; s.charset = "utf-8"; s.src = "http://d.hatena.ne.jp/keyword/%c5%ec%b5%fe%c3%cf%ba%db?mode=rss"; } var xml = {}; xml.onload = function(data){ var items = data["item"]; if(items.length == 0) return; var h = "<ul>\n"; for(var i = 0; i < Math.min(items.length, 20); i++){ var item = items[i]; if(typeof(item["description"]) == "object") item["description"] = ""; if(typeof(item["title"]) == "object") item["title"] = ""; h += "<li><a href=\"" + item["link"] + "\" title=\"" + item["description"] + "\">" + item["title"] + "</a></li>\n"; } h += "</ul>"; document.getElementById("field").innerHTML = h; } </script> うまい回避策などあれば教えていただけませんでしょうか。 参考ページ http://tech.nitoyon.com/javascript/xml2json.html
- ベストアンサー
- JavaScript
- ロールオーバーで画像を先読みする方法
スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか？ お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }
- ベストアンサー
- JavaScript
補足
ありがとうございます。 つまり、取得したデータに対して実体参照化を行い表示させる・・・ という事なのだと思いますが、やはりfirefox3.3.6、chrome、IEでも動作しませんでした。 何だか私のＰＣが悪いような気がしてきました。 謎が深まるばかりです。 しかし、実体参照化の事を教えて頂き、ありがとうございます。 取得したデータなんだから、そのまま使って大丈夫だろうと思うのが間違いなんですね(T_T)