PrettyPhoto - передача уникального параметра из окна iframe на родительскую страницу

Недавно я начал использовать 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 play-video, которое извлекает URL-адрес видео из базы данных и передает его, чтобы его можно было воспроизвести во всплывающем окне. Это прекрасно работает.

2) Теперь play-video также генерирует уникальный идентификатор, который передается на страницу (окно iframe), где воспроизводится видео. Прямо сейчас я просто показываю это значение на странице. Я могу сохранить этот уникальный идентификатор как скрытое поле или как значение div.

3) Теперь, когда пользователь закрывает это окно - как мне получить доступ к этому уникальному идентификатору в функции обратного вызова красивой фотографии, которая находится на главной странице.

Большое спасибо цените свое время


iframe jquery callback jquery-callback prettyphoto
person Gublooo    schedule 16.03.2012    source источник
comment
привет Gublooo, какой видеоплеер ты используешь?   -  person Luca Filosofi    schedule 24.03.2012
comment
Его виддлер - там хранятся мои видео - я получаю код встраивания из базы данных   -  person Gublooo    schedule 25.03.2012

Ответы (3)


arrow_upward
2
arrow_downward

Создайте переменную на главной странице.

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

Теперь функция для записи значения

function setUniqeId(val) {
    UniqueId = val;
}

Теперь внутри iframe, где идентификатор уже был получен, передайте его родительскому элементу, например

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);
};
person Starx    schedule 25.03.2012
comment
Спасибо, Starx - я попробовал ваш подход, но я застрял в чтении уникального идентификатора в коде javscript iframe - я попытался установить уникальный идентификатор как в поле div, так и в скрытом поле, но в javascript я не могу прочтите это значение, чтобы я мог передать это значение в функцию parent.setUniqueId. - Например ‹тип ввода = скрытый id = topic_user_id name = topic_user_id value = 1980 /› Или ‹div id = topic_user_id› 1980 ‹/div› - person Gublooo; 25.03.2012
comment
В javascript - пробовал читать, используя var unique_id = document.getElementById (topic_user_id) .value; для скрытого поля и var id = document.getElementById (topic_user_id) .innerHTML; а когда делаю алерт - до него даже не доходит. Спасибо - person Gublooo; 25.03.2012
comment
@Gublooo, скрипт не может прочитать элемент, если он не загружен в DOM, поместите скрипт parent.setUniqueId() после div или input - person Starx; 25.03.2012
comment
Спасибо, Starx - это сработало отлично. Цените свое время и вклад - person Gublooo; 25.03.2012

arrow_upward
0
arrow_downward

Попробуйте следующий сценарий:

<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» к нажатой ссылке, чтобы вы могли легко указать его в обратном вызове. Он также удаляет класс внутри обратного вызова, чтобы предотвратить повторный выбор последней нажатой ссылки.

person Chaney Blu    schedule 20.03.2012
comment
Привет, Чейни - похоже, ваш код получает topic_id - я уже получаю topic_id в моем текущем коде. Мой вопрос: когда я нажимаю на ссылку, которая открывает диалоговое окно prettyphoto для воспроизведения видео, ссылка вызывает php-скрипт воспроизведения видео, который генерирует unique_id и извлекает URL-адрес видео, который отображается во всплывающем окне. Теперь, когда пользователь закрывает всплывающее окно - как мне получить сгенерированный unique_id ... Спасибо - person Gublooo; 25.03.2012

arrow_upward
0
arrow_downward

Просто получите значение из скрытого поля при срабатывании функции обратного вызова.

myvideo - это идентификатор iframe. Если в DOM будет существовать только один iframe, просто используйте iframe в качестве селектора (без хеша). hidden - это идентификатор скрытого поля внутри iframe.

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>
person Simon Edström    schedule 20.03.2012
comment
спасибо, Саймон, но в моей настройке выше - iframe prettyphoto вызывается при нажатии на ссылку - где я могу указать идентификатор для iframe - person Gublooo; 25.03.2012