同じドメイン内であればjqueryのloadやajaxでいけますが、他サイト(別ドメイン)になるとできません。
そこでjqueryのjquery.xdomainajax.jsを使って外部URLのhtmlを取得する方法のTIPSです。
ファイル全部を読むこともできるし、idやclass名で一部分や特定の箇所だけ切り取って表示することも可能。
※一部のhttpsサイトでは取得できませんでした。(原因不明)
jquery.xdomainajax.jsをダウンロード
以下よりjquery.xdomainajax.jsをダウンロードします。
jquery.fn/cross-domain-ajax at master ? padolsey/jquery.fn ? GitHub
ダウンロードするのはjquery.xdomainajax.jsだけでOKです。
このファイルがないと別ドメインでのファイルを取得できません。
コード
とりあえず以下をコピーしてhtmlファイルで保存してブラウザで確認してみましょう。
jsの場所は適宜変更してください。
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.2.min.js”></script><script type=”text/javascript” src=”js/jquery.xdomainajax.js”></script>
<h1>サンプル – 別ドメインの外部URLからidやclassなど特定の箇所を抜き出しサイトに表示する方法</h1>
<div id=”container”></div>
<div id=”header”></div>
<div id=”stock”></div>
<script type=text/javascript>
$(function() {
$.ajax({
url: ‘http://www.scenicbyway.jp/sv/jp/?graph’,
type: ‘GET’,
success: function(data) {
$(‘#container’).html(data.responseText);
$table = $(‘table’, $(‘#container’));
$(‘#header’).html($table.parent().prev().html());
$(‘#stock’).html($table.parent().html());
}
});
});
</script>
URLを変えたり、中身を変えたり
適宜url:や取得するjquery部分を変えて扱います。