3

最近、prettyphoto を使用してビデオを表示し始めました。

これが私の現在の設定です

<link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="/js/jquery.prettyPhoto2.js" type="text/javascript" charset="utf-8">

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    コールバック: 関数()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid");
                $.post('/course/close-video', {topic_id: topicid });
                lastClicked = null;
        }
    }
    }).click(関数(){
        lastClicked = $(これ);
});
</script>


<a data-topicid="<?php echo $topic->topic_id;?>" href="/course/play-video/topic_id/<?php echo $topic->topic_id;?>?iframe=true&width=470&height =340" rel="prettyPhoto" title="<?php echo $topic->topic_name;?>">
<img src="/images/videos/<?php echo $image_name;?>" width="170" height="103" alt="<?php echo $topic->topic_name;?>"/>
</a>

これが起こっていることです

1) ユーザーがリンクをクリックすると、play-video php アクションが呼び出され、データベースからビデオの URL が取得され、ポップアップ ウィンドウで再生できるように渡されます。これはうまくいきます。

2) play-video は、ビデオが再生されるページ (iframe ウィンドウ) に渡される一意の ID も生成します。現在、その値をページに表示しているだけです。その一意の ID を非表示フィールドまたは div 値として保存できます。

3）ユーザーがこのウィンドウを閉じると、メインページにあるプリティフォトのコールバック関数でこの一意のIDにアクセスするにはどうすればよいですか。

どうもありがとう あなたの時間を感謝します

4

3 に答える 3

2

メインページで変数を作成します。

var UniqueId; //Unique ID that will arrive from the iframe

値を書き込む関数

function setUniqeId(val) {
    UniqueId = val;
}

IDがすでに受信されているiframe内で、次のように親に渡します

parent.setUniqueId(TheIdThatIHaveReceived);

アップデート：

読み取るスクリプトが DOM のロード後にあることを確認してください。これを確実にする初期の方法の 1 つは、要素の後にスクリプトを配置することです。

<input id="topic_user_id" type="text" />
<script>
var unique_id = document.getElementById("topic_user_id").value;
parent.setUniqueId(unique_id);
</script>

最新の手法の 1 つは、次のようなイベント ハンドラーを作成することです。

window.onload = function() {
    var unique_id = document.getElementById("topic_user_id").value;
    parent.setUniqueId(unique_id);
};
于 2012-03-25T05:03:47.823 に答える
0

次のスクリプトを試してください。

<script type="text/javascript">
$("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function() {           
        active_link = $("a[rel^='prettyPhoto'].active");
        topic_id = $(active_link).data('topicid');
        $(active_link).removeClass('active');
        alert(topic_id);
        $.post('/course/close-video', {topic_id: topic_id});
    }
}).click(function(){
    $(this).addClass('active');
});
</script>

これにより、クリックされたリンクに「active」という名前のクラスが追加され、コールバックで簡単にターゲットにできるようになります。また、コールバック内のクラスを削除して、クリックされた最新のリンクが再選択されないようにします。

于 2012-03-20T15:49:28.967 に答える
0

コールバック関数がトリガーされたときに、hiddenfield から値を取得するだけです。

myvideoiframe の ID です。DOM に iframe が 1 つしか存在しない場合は、iframe(ハッシュなしで) セレクターとして使用します。hiddeniframe 内の hiddenfield の ID です。

var value = $("#myvideo").contents().find('#hidden').val();
alert(value);

iframe から値を取得する方法を確認できるように、JS フィドルを作成しました。 http://jsfiddle.net/vtDRW/

それはかなり簡単だと思います。したがって、hiddenvalue を配置した iframe を開いて、コールバックが発生したときにそれを取得するだけです。

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    callback: function()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid"); 
                var iframeValue = $("#IFRAME_ID").contents().find('#HIDDEN_ID').val();
                $.post('/course/close-video', {topic_id: topicid });
                lastClicked = null;
        }
    }
    }).click(function (){
        lastClicked = $(this);
});
</script>
于 2012-03-20T20:55:52.430 に答える