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页面：

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>

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 s，那么只需将它们设置为您的css中的display: block。

Answer 2

为什么这些绑定在iframe src发生变化时有效？

因为每次iframe源更改都会触发load事件，并且您已为iframe load事件设置处理程序，因此绑定可以正常工作。

在这个运行的时候，这些人对iframe src的所有内容都知之甚少，看起来像是live（）而不是bind（）？

它不像现场表演。它的工作原理是因为仅当带有iframe的内容被完全加载时才会触发加载。

是'$（“＃myframe”）。load（...）'？每次加载iframe时都会运行吗？

是的，每当iframe刷新或源被修改时它都会运行。

为什么每次加载同一页面时绑定都不会加倍？

绑定不会加倍，因为使用iframe附加到内容。当内容被替换时，绑定也会丢失。

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

2 个答案: