JSONPの動的呼出

投稿日: 2022年1月28日 作成者: takezou

ブラウザのJavascriptからWeb APIを呼び出したいのだが、APIの提供先が、CORSに対応していないので、仕方なくJSONPで呼び出すことにした。(結構大手が提供しているサービスなのに・・・)

で、JSONPで動的なパラメータを使用(例えばMAP上で位置をクリックした場所の座標情報をパラメータと)して呼び出したいので調べたら、domにscriptタグを動的に追加するのが一般的なやり方のようだ。

しかし、イベント発生時にその都度追加して行くとどういう動作するか不安なので、作成するscriptタグは一つにしたい。

で、以下のようなコードを書いてみたら、うまく動きましたぜ。

var url = "https://・・・";
url += "&p1=" + param1;
url += "&p2=" + param2;
url += "&callback=callbackfunc";

// JSONPで呼び出すので、本体にscriptエレメントを追加してやる。

var scr = document.getElementById("JSONPScript");

if (scr != null) {  // すでに存在すれば削除
    document.body.removeChild(scr);
}
// 新たに追加
scr = document.createElement("script");
scr.id = 'JSONPScript';
scr.src = url;
document.body.appendChild(scr);

まぁ、JSONPはちょっと危険なのであまり使いたくは無いけど、PROXY使うと、遅くなるし、大手が提供しているAPIだから、まぁいいかなと・・・

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: javascript, Web, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。