Question

我最近开始使用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({
    callback: function()
    {           
        if(lastClicked != null) {
                var topicid = lastClicked.data("topicid"); 
                $.post('/course/close-video', {topic_id: topicid });
                lastClicked = null;
        }
    }
    }).click(function (){
        lastClicked = $(this);
});
</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）当用户点击链接时 - 调用播放视频php动作，该动作从数据库中检索视频URL并传递，以便可以在弹出窗口中播放。这很好。

2）现在播放视频还生成一个唯一的ID，该ID被传递到播放视频的页面（iframe窗口）。现在我只是在页面上显示该值。我可以将该唯一ID存储为隐藏字段或div值。

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

非常感谢感谢您的时间

Answer 1

在主页面上创建变量。

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);
};

Answer 2

尝试以下脚本：

<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”的类，以便您可以轻松地在回调中将其作为目标。它还会删除回调内的类，以防止重新选择最近点击的链接。

Answer 3

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

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

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

我为你创建了一个JS小提琴，这样你就可以看到如何从iframe中获取值。 http://jsfiddle.net/vtDRW/

我认为它很直接。所以只需打开你放置了隐藏值的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>

PrettyPhoto - 将唯一参数从iframe窗口传递到父页面

3 个答案:

更新