有没有更好的方法来动态显示包含随机jquery绑定的iframe ?

Question

这可以工作，但我不确定为什么(我相当肯定有更聪明的方法来实现它)。我有一个页面与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 src页面:

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>

Answer 1

是'$("#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，那么只需在你的css中将它们设置为display: block。

Answer 2

为什么当iframe SRC改变时这些绑定工作?

因为每次iframe源改变时，它都会触发load事件，而你已经为iframe load事件设置了处理程序，所以绑定工作

在这是运行的时候，这些不知道任何关于iframe src的，将被加载似乎它的行为像live()而不是bind()?

它没有表现得像个活人。因为只有当iframe内的内容完全加载时才会触发加载。

是'$("#myframe").load(…)' ?每次加载iframe时都运行吗?

是的，每次刷新iframe或修改source时，它都会运行。

为什么每次加载相同的页面时绑定没有翻倍?

绑定没有翻倍，因为它被附加到iframe内的内容。当内容被替换时，绑定也会丢失。