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">
  $(文档).ready(函数(){
    var lastClicked = null;
    $("a[rel^='prettyPhoto']").prettyPhoto({
    回调：函数（）
    {           
        如果（最后点击！= null）{
                var topicid = lastClicked.data("topicid");
                $.post('/course/close-video', {topic_id: topicid });
                最后点击=空；
        }
    }
    }).click(函数 (){
        lastClicked = $(this);
});
</脚本>


<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) 现在播放视频还会生成一个唯一的 ID，该 ID 会传递到播放视频的页面（iframe 窗口）。现在我只是在页面上显示该值。我可以将该唯一 ID 存储为隐藏字段或 div 值。

3) 现在，当用户关闭此窗口时 - 我如何在主页中漂亮照片的回调函数中访问此唯一 ID。

非常感谢您的时间

4

3 回答 3

2

在主页上创建一个变量。

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

现在是一个写入值的函数

function setUniqeId(val) {
    UniqueId = val;
}

现在在 iframe 中，已经收到了 id，将其传递给父级

parent.setUniqueId(TheIdThatIHaveReceived);

更新：

确保要读取的脚本是在加载 DOM 之后。确保这一点的早期方法之一是将脚本放在元素之后

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

现代技术之一是创建一个事件处理程序，如

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

只需在触发回调函数时从隐藏字段中获取值。

myvideo是 iframe 的 ID。如果 DOM 中只存在一个 iframe，则只需iframe用作选择器（不带散列）。hidden是 iframe 中隐藏字段的 ID。

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

我为您创建了一个 JS fiddle，因此您可以了解如何从 iframe 获取值。 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 回答