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

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

3 голосов
/ 16 марта 2012

Я недавно начал использовать 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) Теперь, когда пользователь закрывает это окно - как я могу получить доступ к этому уникальному идентификатору в функции обратного вызова симпатичной фотографии,главная страница.

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

Ответы [ 3 ]

2 голосов
/ 25 марта 2012

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

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);
};
.
0 голосов
/ 21 марта 2012

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

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

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>
0 голосов
/ 20 марта 2012

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

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

...