GettingSignals

[TIPS]JavaScriptから他ドメインのファイルにアクセスする方法

2011年4月9日
Posted by hina
(21:04)

長いタイトルになってしまいましたが・・・。
内容も長い・・・。

JavaScriptを使うと、
自ドメインのファイルにはアクセスできますが、
他ドメインのファイルにはアクセスできない。
という仕様があります。(最近知ったけど)

それで今回は、
phpを呼び出して、
その中でファイル取得して、
JavaScriptで処理する。
という方法をやってみました。

参考にしたURLはこちら。(大変助かりました、ありがとうございます)
必ず得するかもしれない一言」さんの「javascriptからphp呼び出し」という記事。
http://blogs.yahoo.co.jp/koga2020/49620713.html

用意するのは、HTMLとPHPファイル。

今回は起動(body onload)時に処理を行うようにしています。
※ボタン用意してクリックしたらという動作も可能

1.【html】<body onload>でgetData()呼び出し
2.【html】getData()内で値を設定し、実行
  →php実行
3.【php】callback名、引数名を取り出し
4.【php】他ドメインのtxtを取得
5.【php】改行コードを変換
(変換しないとエラーになります)
6.JavaScriptを実行する処理を設定($htmlに値をセット)

ココが肝心なところ
parent.’.$callback.'(“‘.$data.'”);

parentは現在のフレームから他フレームを参照します。
現在のフレームは、【html】“getdata_Frame”のこと
他フレームは、【html】“form1”のこと

つまり、“form1”“callback”を呼び出しますよの記述

7.【php】echoで$htmlを出力(実行)
8.【php】終了
9.【html】“form1”“callback”に設定されたgetdata_callback()を呼び出し
10.【html】getdata_callback()で引数(newdata)にtxtの取得結果が設定されている

以下は参考ソースです。(動作確認してないので、動かなかったらごめんなさい)


index.html
<html>
<head>
<script type=”text/javascript”>
<!–
// php実行後に呼び出される関数を作成
function getdata_callback( newdata ){
//php実行後の処理を記述
}

// php呼び出す関数を作成

function getData(){
    // php実行後に呼び出される関数を設定
document.getElementById(“form1”).callback.value = “getdata_callback“;

    // php実行時に値を渡す場合は設定

document.getElementById(“form1”).arg1.value = “値は任意”;

    // php呼び出し

document.getElementById(“form1”).submit();
}

// 起動時に呼び出す関数を作成
function initialize() {

    // phpを呼び出す関数をコール
getData();
}
–>
</script>
</head>
<!– php呼び出しのイベント。body onloadでなくても良い –>
<body onload=”initialize()”>

<!– php呼び出し用のform。
   id    :任意
   action :用意したphpファイルを設定
   target :phpからform1のcallbackにアクセスするために必要
   method:phpから結果を受け取るので、必ず”post”を設定
 –>

<form id=“form1” action=”getdata.php” target=“getdata_Frame” method=”post”>

<!– php実行後に呼び出す関数名を格納する用 –>
<input id=”callback” name=”callback” type=”hidden”>

<!– php実行時の引数を格納する用 –>
<input id=”arg1″ name=”arg1″ type=”hidden”>

</form>

<!– phpからform1のcallbackにアクセスするために必要 –>

<iframe id=“getdata_Frame” name=“getdata_Frame” style=”width:0;height:0;visibility:hidden” tabindex=”-1″></iframe>
</body>
</html>

getdata.php

<?php
//JavaScriptから受け取った値の取り出し
$callback = $_POST[“callback”];
$arg1 = $_POST[‘arg1’];

//アクセスするファイルを設定

$path = “http://www.xxxx.co.jp/zzzz.txt”;

//ファイルの内容を取得

$temp = file_get_contents($path);

//改行コードを変換(CR削除)
$data = str_replace(“r”,”,$temp);

//改行コードを変換(LF→n)
$data = str_replace(“n”,’n’,$data);

//JavaScriptのコードを呼び出し
//取得結果($data)はcallbackの引数に設定
//これで値を受け渡せる
$html = ‘<script language=”JavaScript”>

parent.’.$callback.'(“‘.$data.'”);
</script>
‘;
echo $html;

//php終了

exit;
?>

(22:28)

Comments are currently closed.

Follow

カレンダー

2018年7月
« 10月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031