Is there a better way to dynamically display iframes that contain random jquery bindings?

问题

This works, but I'm not sure why (and I'm fairly sure there's a smarter way to implement it). I have a page with an iframe that's src will change as needed. I'm trying to build this so different src's can be added later. After each src loads, I need to bind functionality to various elements. My main question is in the comments below; but in general, I'm curious about better ways to approach this. Thanks.

<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>

And the iframe src pages:

page1

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

page2

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

page3

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

回答1:

is it '$("#myframe").load(...)' ? Does that run everytime the iframe is loaded?

Yes.

if so, why aren't the bindings doubling up everytime the same page loads?

Because the contents of the iframe are a separate DOM. so each time the iframe loads the previous dom is destroyed and the handlers are attached to the elements in the new DOM.

As far as making it so that other pages can be added later without modifying code that should be pretty easy. Just change your markup in the iframe loaded page to something like this:

<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>

Then adjust your js like so:

$("#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;
            }
        });
    });

If you need the a tags to mimic divs then just set them to display: block in your css.

回答2:

why do these bindings work when the iframe src changes?

Because every time iframe source changes it triggers the load event and you have set handler for iframe load event so the bindings work.

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()?

It is not acting like a live. It works because the load is triggered only when the contents withing iframe are fully loaded.

is it '$("#myframe").load(...)' ? Does that run everytime the iframe is loaded?

Yes, it runs everytime the iframe is refresh or source is modified.

why aren't the bindings doubling up everytime the same page loads?

The bindings are not doubling becase the being is attached to the contents withing iframe. When the contents get replaced the bindings are also lost.

来源：https://stackoverflow.com/questions/6802641/is-there-a-better-way-to-dynamically-display-iframes-that-contain-random-jquery