テストされ、動作しています
http://www.nu.nlはサイトではないため、プロキシ方式を使用してクロスドメインを実行できます。そうしないと、次のようなエラーが発生します。 GET
PHP
XMLHttpRequestはhttp://www.nu.nl/をロードできません。Origin
http://yourdomain.comは、Access-Control-Allow-Originでは許可されていません。
まず、PHP側のサーバーでこのファイルを使用します。
proxy.php(更新)
<?php
if(isset($_GET['site'])){
$f = fopen($_GET['site'], 'r');
$html = '';
while (!feof($f)) {
$html .= fread($f, 24000);
}
fclose($f);
echo $html;
}
?>
これで、 jQueryを使用するjavascript側で、次のことができます。
(私が使用しているのは、 prop();
jQuery 1.7.2バージョンを使用しているためです。したがって、 1.6.xより前のバージョンを使用している場合は、attr();
代わりに試してください)
$(function(){
var site = 'http://www.nu.nl';
$.get('proxy.php', { site:site }, function(data){
var href = $(data).find('.hdtitle').first().children(':first-child').prop('href');
var url = href.split('/');
href = href.replace(url[2], 'nu.nl');
// Put the 'href' inside your div as a link
$('#myDiv').html('<a href="' + href + '" target="_blank">' + href + '</a>');
}, 'html');
});
ご覧のとおり、リクエストはドメイン内にありますが、一種のトリッキーなものであるため、Access-Control-Allow-Origin
エラーが再発することはありません。
アップデート
コメントに書き込んだとおりにすべての見出しを取得したい場合href
は、次のようにすることができます。
このようにjQueryコードを変更するだけです...
$(function(){
var site = 'http://www.nu.nl';
$.get('proxy.php', { site:site }, function(data){
// get all html headlines
headlines = $(data).find('.hdtitle');
// get 'href' attribute of each headline and put it inside div
headlines.map(function(elem, index){
href = $(this).children(':first-child').prop('href');
url = href.split('/');
href = href.replace(url[2], 'nu.nl');
$('#myDiv').append('<a href="' + href + '" target="_blank">' + href + '</a><br/>');
});
}, 'html');
});
更新されたproxy.php
ファイルを使用します(どちらの場合も、1つまたはすべての見出し)。
お役に立てれば :-)