Есть ли лучший способ динамического отображения iframes, которые содержат случайные привязки jquery? - PullRequest
Новая
       4

Есть ли лучший способ динамического отображения iframes, которые содержат случайные привязки jquery?

0 голосов
/ 23 июля 2011

Это работает, но я не уверен почему (и я вполне уверен, что есть более разумный способ реализовать это). У меня есть страница с iframe, который src будет меняться по мере необходимости. Я пытаюсь построить это так, чтобы другие src могли быть добавлены позже. После каждой загрузки src мне нужно привязать функциональность к различным элементам. Мой главный вопрос в комментариях ниже; но в целом мне любопытно, как лучше подойти к этому. Спасибо. 

<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script language="javascript">

$(document).ready(function() {

$(".start").click(function(){
    init();
}); 


function init() {       

    $("#container").html('<iframe id="myframe" src="testpage1.html" ></iframe>');

    //QUESTIONS:
    //why do these bindings work when the iframe src changes? 
    //at the time this is run, these don't know anything about the iframe src's that will be loaded
    //seems like it's acting like live() rather than bind()?
    //is it '$("#myframe").load(...)' ? Does that run everytime the iframe is loaded? 
    //if so, why aren't the bindings doubling up everytime the same page loads?
    $("#myframe").load( function() { //make sure iframe is loaded- 
        $('#myframe').contents().find('.page2Link').click(function(){
            showPage('page2');
        });
        $('#myframe').contents().find('.page1Link').click(function(){
            showPage('page1');
        });
        $('#myframe').contents().find('.page3Link').click(function(){
            showPage('page3');
        });
        $('#myframe').contents().find('.whatever').click(function(){
            showPage('page1');
        });
    });


}

function showPage(id){
    console.log('showing: ' + id);
    switch (id){
        case 'page1':
             $("#myframe").attr("src","testpage1.html");
        break;

        case 'page2':
             $("#myframe").attr("src","testpage2.html");
        break;

        case 'page3':
             $("#myframe").attr("src","testpage3.html");
        break;
    }
}   


});

</script>

<div id="container"></div>

<a class="start">start</a>

И страницы iframe:

стр.1 

 <div class="page2Link">show page 2</div>

стр.2 

<div class="page1Link">show page 1</div>
 <div class="page3Link">show page 3</div>

page3 

<div class="whatever">show whatever page</div>

Ответы [ 2 ]

1 голос
/ 23 июля 2011

это '$ ("# myframe"). Load (...)'? Это запускается каждый раз, когда загружается iframe?

Да.

если это так, почему привязки не удваиваются при каждой загрузке одной и той же страницы?

Потому что содержимое iframe - это отдельный DOM. поэтому каждый раз, когда iframe загружает предыдущий dom, уничтожается, и обработчики присоединяются к элементам в новом DOM.

Если сделать так, чтобы другие страницы можно было добавить позже без изменения кода, это должно быть довольно просто. Просто измените разметку на странице, загруженной в iframe, примерно так: 

<a class="page1Link" class="pageLink" href="/url/to/page1">show page 1</a>
 <a class="page3Link" class="pageLink" href="/url/to/page3">show page 3</a>

Затем настройте свой js следующим образом: 

$("#myframe").load( function() { //make sure iframe is loaded- 
        $('#myframe').contents().find('.pageLink').click(function(e){
            e.preventDefault();
            var src = $(this).attr('href');
            if(src){
               $("#myframe").attr('src', src);
               return false;
            }
        });
    });

Если вам нужно, чтобы теги a имитировали div с, просто установите их на display: block в вашем CSS.

0 голосов
/ 23 июля 2011

Почему эти привязки работают, когда изменяется iframe?

Поскольку каждый раз, когда источник iframe изменяется, он запускает событие загрузки, и вы устанавливаете обработчик для события загрузки iframe, чтобы привязки работали.

В то время, когда это выполняется, они ничего не знаютЧто касается загруженного в iframe src, похоже, что он действует как live (), а не как bind ()?

Он не действует как live.Это работает, потому что загрузка запускается только тогда, когда содержимое внутри iframe полностью загружено.

это '$ ("# myframe"). Load (...)'?Это запускается каждый раз, когда загружается iframe?

Да, он запускается при каждом обновлении iframe или изменении исходного кода.

почему привязки не удваиваются при каждой загрузке одной и той же страницы?

Связывания неудвоение, потому что существо прикреплено к содержимому с помощью iframe.Когда содержимое заменяется, привязки также теряются.

...