id:appfb
ポイントあり100ptベストアンサーあり
ウェブ制作

PHP から外部ファイルの JavaScript へパラメーターを渡し、リダイレクトさせるには？という質問です。

PHP バージョンは関係ないと思いますが 5.2.17 で smarty を使用しています。

以下のコードはネットに散らばっている参考コードを寄せ集めて作ってみました。
カウントダウンで表示を変えているのですが、本来はタイムアウトしたら http://ほげ.com?aid={$aid}&xid={$xid} にリダイレクトしたいのです。
どのように書けばいいのかいろいろ調べてみますが皆目見当がつきません。

また jquery.countdown.js という外部ファイルに PHP から引数を渡したいのですが可能ですか？
例えば、 m = getFinishTime(parseInt(21)); の (21) を PHP 側でコントロールしたいのです。
また、リダイレクトURLも jquery.countdown.js に書くとするならば、これもパラメーターの渡し方がわかりません＞＜

JavaScript は全然といっていいほど経験がないのでチンプンカンプンな質問かもしれませんが、どなたかよろしくお願いしますm(_ _)m

回答の条件
  • 1人5回まで
  • 登録：
  • 終了：2013/09/18 11:45:24
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:appfb

質問者から

appfb2013/09/18 00:19:12

jquery.countdown.js

$(function(){
	m = getFinishTime(parseInt(21));
	function getFinishTime(e){
		var datetime = new Date();
		return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
	}
	countDown();
});
function countDown(){
	var startTime = new Date();
	var endTime = new Date(m);
	var diff	= endTime - startTime;
	var times	= 24 * 60 * 60 * 1000;
	var day		= Math.floor(diff / times)
	var hour	= Math.floor(diff % times / (60 * 60 * 1000))
	var min		= Math.floor(diff % times / (60 * 1000)) % 60
	var sec		= Math.floor(diff % times / 1000) % 60 % 60
	var ms		= Math.floor(diff % times / 10) % 100
	if(diff > 0){
		$("#Timer").text(sec +'秒');
		setTimeout('countDown()', 10);
		document.getElementById("intime").style.display = "block";
		document.getElementById("timeover").style.display = "none";
	}else{
		//終了した時のテキスト
		$("#Timer").text('Time Over !!');
//		location.href="http://hoge.com/";
		document.getElementById("intime").style.display = "none";
		document.getElementById("timeover").style.display = "block";
	}
}

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<link href="{$root_surl}css/master.css" rel="stylesheet" type="text/css">
{literal}
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="/js/jquery.countdown.js" type="text/javascript"></script>
{/literal}
</head>

<body>
		<div id="Timer"></div>
		<div id="intime">
			<p>ハロー(*^。^*)</p>
		</div>
		<div id="timeover" style="display:none;">
			<p>タイムオーバーとなりました(・_・;)</p>
		</div>
</body>
</html>
規約違反として通知

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント100pt

こんな感じになると思います。

index.php (抜粋)

    ...
    <script>
    <?php
        echo 'var finish = ' . $finish . ';';
        echo 'var url = "' . $url . '";';
        /*
            var finish = 21;
            var url = "http://hoge.com/";

            というふうに出力されることを期待する。
        */
    ?>
    </script>
{literal}
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.countdown.js" type="text/javascript"></script>
    <script>
    // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
    $(function(){
        m = getFinishTime(parseInt(finish));
        countDown(url);
    });
    </script>
{/literal}
    ...

jquery.countdown.js (抜粋)

function getFinishTime(e){  // ★関数として定義
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}

function countDown(url){    // ★引数で受け取る
    ...
    if(diff > 0){
        ...
    }else{
        //終了した時のテキスト
        $("#Timer").text('Time Over !!');
        location.href=url;  // ★引数を使う
        document.getElementById("intime").style.display = "none";
        document.getElementById("timeover").style.display = "block";
    }
}



追記です。

終了時刻を計算した m が、うまく渡せていないことに気が付きました。
名前空間の汚染も抑えた形で、ちょっと書き直してみました。
index.php (抜粋)

    ...
{literal}
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.countdown.js" type="text/javascript"></script>
{/literal}
    <script>
    // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
    $(function(){
    <?php
        echo 'var finish = ' . $finish . ';';
        echo 'var url = "' . $url . '";';
        /*
            var finish = 21;
            var url = "http://hoge.com/";

            というふうに出力されることを期待する。
        */
    ?>
        var m = getFinishTime(parseInt(finish));
        countDown(url, m);
    });
    </script>
    ...

jquery.countdown.js (抜粋)

function getFinishTime(e){  // ★関数として定義
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}

function countDown(url, m){    // ★引数で受け取る（終了時刻も）
    ...
    if(diff > 0){
        $("#Timer").text(sec +'秒');
        setTimeout(function() {
                countDown(url, m);  // ★引数として渡す
            }, 10);
        document.getElementById("intime").style.display = "block";
        document.getElementById("timeover").style.display = "none";
    }else{
        //終了した時のテキスト
        $("#Timer").text('Time Over !!');
        location.href=url;  // ★引数を使う
        document.getElementById("intime").style.display = "none";
        document.getElementById("timeover").style.display = "block";
    }
}
他2件のコメントを見る
id:a-kuma3

すみません。
終了時刻をうまく渡せていないと思うので、回答に修正したコードを追記しました。

2013/09/18 00:16:41
id:appfb

できました！
教えていただいたことは先日中に希望通り動くことを確認していたのですが、smartyの変数受け取りにスマートな方法はないかと手間取っていました。

> 今どきの javascript 事情だと、いろいろなライブラリを組み合わせて使うので、名前空間を汚すことを嫌う風潮があります。
なるほど･･･。
勉強になります、ありがとうございました！

2013/09/18 11:44:47

その他の回答（0件）

id:appfb

質問者から

appfb2013/09/17 22:47:43

質問文を編集しました。詳細はこちら。

規約違反として通知
id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154ここでベストアンサー

ポイント100pt

こんな感じになると思います。

index.php (抜粋)

    ...
    <script>
    <?php
        echo 'var finish = ' . $finish . ';';
        echo 'var url = "' . $url . '";';
        /*
            var finish = 21;
            var url = "http://hoge.com/";

            というふうに出力されることを期待する。
        */
    ?>
    </script>
{literal}
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.countdown.js" type="text/javascript"></script>
    <script>
    // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
    $(function(){
        m = getFinishTime(parseInt(finish));
        countDown(url);
    });
    </script>
{/literal}
    ...

jquery.countdown.js (抜粋)

function getFinishTime(e){  // ★関数として定義
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}

function countDown(url){    // ★引数で受け取る
    ...
    if(diff > 0){
        ...
    }else{
        //終了した時のテキスト
        $("#Timer").text('Time Over !!');
        location.href=url;  // ★引数を使う
        document.getElementById("intime").style.display = "none";
        document.getElementById("timeover").style.display = "block";
    }
}



追記です。

終了時刻を計算した m が、うまく渡せていないことに気が付きました。
名前空間の汚染も抑えた形で、ちょっと書き直してみました。
index.php (抜粋)

    ...
{literal}
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="/js/jquery.countdown.js" type="text/javascript"></script>
{/literal}
    <script>
    // ★php のコードで展開された javascript の変数を使って、関数を呼び出す
    $(function(){
    <?php
        echo 'var finish = ' . $finish . ';';
        echo 'var url = "' . $url . '";';
        /*
            var finish = 21;
            var url = "http://hoge.com/";

            というふうに出力されることを期待する。
        */
    ?>
        var m = getFinishTime(parseInt(finish));
        countDown(url, m);
    });
    </script>
    ...

jquery.countdown.js (抜粋)

function getFinishTime(e){  // ★関数として定義
    var datetime = new Date();
    return datetime.setTime(datetime.getTime() + ((e) * 1000)); // 秒
}

function countDown(url, m){    // ★引数で受け取る（終了時刻も）
    ...
    if(diff > 0){
        $("#Timer").text(sec +'秒');
        setTimeout(function() {
                countDown(url, m);  // ★引数として渡す
            }, 10);
        document.getElementById("intime").style.display = "block";
        document.getElementById("timeover").style.display = "none";
    }else{
        //終了した時のテキスト
        $("#Timer").text('Time Over !!');
        location.href=url;  // ★引数を使う
        document.getElementById("intime").style.display = "none";
        document.getElementById("timeover").style.display = "block";
    }
}
他2件のコメントを見る
id:a-kuma3

すみません。
終了時刻をうまく渡せていないと思うので、回答に修正したコードを追記しました。

2013/09/18 00:16:41
id:appfb

できました！
教えていただいたことは先日中に希望通り動くことを確認していたのですが、smartyの変数受け取りにスマートな方法はないかと手間取っていました。

> 今どきの javascript 事情だと、いろいろなライブラリを組み合わせて使うので、名前空間を汚すことを嫌う風潮があります。
なるほど･･･。
勉強になります、ありがとうございました！

2013/09/18 11:44:47
id:appfb

質問者から

appfb2013/09/17 23:12:17

質問文を編集しました。詳細はこちら。

規約違反として通知

コメント（0件)

コメントはまだありません

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ