JSONPでのおかしな挙動
- 最近Ajaxの勉強を始めたものです。クロスドメインでの通信を行うため、レンタルサーバー２個の環境で、JSONPを使って下記のようなコードを記述したところ、無事に動作が確認できました。
- ブログとしては、SeesaaとFC2を利用したところ、どちらもNGでした。alertで変数をチェックしたところ、本来「初期値です」というテキストが表示されるはずのところが、nullになっており、どうも該当タグがDOMで認識されていないようです。
- 関数での変数のスコープの問題かとも思いますが、どうにも理解できなくて困っています。
- ベストアンサー
JSONPでのおかしな挙動
最近Ajaxの勉強を始めたものです。 クロスドメインでの通信を行うため、レンタルサーバー２個（ドメイン２個） の環境で、JSONPを使って下記のようなコードを記述したところ、無事に 動作が確認できました。 ●HTML（ドメイン１） <html> <head> <title>JSONPテスト</title> <script type="text/javascript"> function callback(data) { contents = "姓: " + data.sei + " 名: " + data.mei; alert(document.getElementById('here').innerHTML); //初期値です document.getElementById('here').innerHTML = contents; } var url = "ドメイン２のURL/callback.js"; var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> <div id="here">初期値です</div> </body> </html> ●callback.js（ドメイン２） callback({"sei": "山田", "mei": "太郎"}); ところが、上記のドメイン１の代わりにブログを使い、ドメイン２ としてレンタルサーバーでテストしたところ、 document.getElementById("here") is null というエラーが出てしまいます。 ブログとしては、SeesaaとFC2を利用したところ、どちらもNGでした。 alertで変数をチェックしたところ、本来「初期値です」というテキスト が表示されるはずのところが、nullになっており、どうも該当タグが DOMで認識されていないようです。 一方で、同じく無料ブログにおいて、単純に、 <script type="text/javascript"> alert(document.getElementById('here').innerHTML); //初期値です </script> のみを実行すると、こちらはうまくいくのです。 関数での変数のスコープの問題かとも思いますが、どうにも理解でき なくて困っています。 アドバイスをよろしくお願いいたします。
- myart
- お礼率69% (18/26)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<body> <div id="here">初期値です</div> </body> の読み込みが完了する前にscriptが動いているからだと思います onloadイベントで処理するようにしてください
関連するQ&A
- JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>
- ベストアンサー
- JavaScript
- JSONPを処理するにはどうすればいいですか？
http://www.baldanders.info/spiegel/remark/archives/000222.shtml このページの下部のサンプルスクリプトを function getjsonp(url){ で囲ってurlを渡してJSONPデータを処理しようとしたのですが、 hundler is not defined とエラーが出てしまいます。 サンプルスクリプトのそのままのコードでは動くのです。 オブジェクト指向がよくわかっていないのでどうすればいいか、識者の方教えてください。 宜しくお願いします。 下記がエラーするスクリプトです。 <script type="text/javascript" src="/js/jsr_class.js"></script> <div id="bookmark"></div> <script type="text/javascript"> var url ='http://del.icio.us/feeds/json/spiegel?callback=hundler'; getjsonp(url); function getjsonp(url){ var oJsr = new JSONscriptRequest(url); oJsr.buildScriptTag(); oJsr.addScriptTag(); function hundler(data) { var ul = document.createElement('ul'); for (var i=0, post; post = data[i]; i++) { var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', post.u); a.appendChild(document.createTextNode(post.d)); li.appendChild(a); ul.appendChild(li); } document.getElementById('bookmark').appendChild(ul); oJsr.removeScriptTag(); } } </script>
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- ボタンに書かれている文字の入れ替え
２つのボタンのどちらを押しても、ボタンに書かれているアルファベットが入れ替わるようにしたいのですが、うまくいきません。 alert(obj1)、alert(obj2)などとして、A,Bともに読み込まれているようなのですが、alert(tmp)の時はundefinedがでます。 どこが間違っているのかよろしければ教えてください。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>勉強中</title> </head> <body> <script> function change_alphabet() { var tmp; var obj1 = document.getElementById("button_1").value; var obj2 = document.getElementById("button_2").value; // alert(obj1); // alert(obj2); tmp = obj1.innerHTML; // alert(tmp); obj1.innerHTML = obj2.innerHTML; obj2.innerHTML = tmp; // alert(obj2); } </script> < input type = "button" id = "button_1" value = "A" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > < input type = "button" id = "button_2" value = "B" style = "width: 25px; height: 25px" onclick = "change_alphabet()" > <body> </html>
- ベストアンサー
- JavaScript
- Jsonpのコールバック関数に内に引数を渡すには？
APIで返されたJsonpコールバック関数に引数を渡したいのですが、やり方が判りません。 それともそもそも、間違っていて １．引数を渡さない ２．コールバック関数内のデータを一旦変数にいれてコールバック関数内から取り出す。 ３． ２で取り出したコールバック関数内のデータと１で渡そうとしていた引数を使う。 とやったほうがいいのでしょうか。 当方経験が浅いためよくわかっていません。基本的な間違いの可能性が高いと思います。 識者の方ご教授下さい。お願いします。 function start(){ var str = "渡したい引数"; var param = new Object(); param.keyword = '東京'; param.inputcharset = 'utf8'; param.outputcharset = 'utf8'; param.format = 'jsonp'; param.callback = 'jsonp4travelAPI'; var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php?'+obj2query( param ); // script 要素の発行//ここでAPIへリクエストを送る。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = url; document.body.appendChild( script ); } // 4travel検索終了後のコールバック関数 function jsonp4travelAPI ( data ) { // データが取得できているかチェック // //ここに渡したい引数も持ってきたい。でも str is not definedになります。 alert(str); } // オブジェクトからクエリー文字列を生成する関数 function obj2query ( obj ) { var list = []; for( var key in obj ) { var k = encodeURIComponent(key); var v = encodeURIComponent(obj[key]); list[list.length] = k+'='+v; } var query = list.join( '&' ); return query; } window.onload =start;
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLに代入したインラインフレームのＤＩＶの値の取得について
下記のソースは「読み込み」ボタンを押した時にあらかじめ用意してた<div id="box">にインラインフレームを代入し、「値取得」ボタンを押したら、'sample.html'内のdivの値「keisan」をアラートで表示する記述です。このソース内容を、ボタンのイベントで「keisan」の値を取得するのではなく、<body>のonLoadでページを開いた瞬間にアラートが 出るようにしたいのですが、お分かりになる方はいらっしゃいますでしょうか？ わかりにくい説明ですみません。どうかよろしくお願いします。 <html> <head></head> <body> <div id="box"></div> <input type="button" value="読み込み" onClick="Details.changeURL('sample.html')" /> <input type="button" value="値取得" onClick="Details.showMessage('keisan')" /> </body> <script type="text/javascript"> <!-- var Details = (function(){ var handle = document.getElementById('box'); var buffer = null; return { changeURL: function(url){ handle.innerHTML = "<iframe src=\""+url+"\" id=\"ifr\"></iframe>"; }, showMessage: function(id){ buffer = document.getElementById('ifr').contentWindow.document; alert(buffer.getElementById(id).innerHTML); } } })(); //--> </script> </html>
- 締切済み
- JavaScript
- 引数のある関数をhtml読み込み後に実行
次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 【javascript】document.getElementByIdは一つしか使えないの？
以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはＩＥ，ＦＦと試しましたが共に同じ結果でした。 ＦＦのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか？
- ベストアンサー
- JavaScript
- セレクト部品の表示内容
が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか？ <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 アドバイスの通り対応したところ、無事に動作できました。 レンタルサーバーとブログでは、読み込みに差があるようですね。 ありがとうございました。