有没有更好的方法来动态显示包含随机jQuery绑定的iframe？ [英] Is there a better way to dynamically display iframes that contain random jquery bindings?

问题描述

这是有效的，但我不知道为什么（我相当确定有一个更智能的方式来实现它）。我有一个页面与iframe的src将根据需要改变。我正在尝试构建这样不同的src可以稍后添加。每个src加载后，我需要将功能绑定到各种元素。我的主要问题是在下面的评论中但一般来说，我好奇的是更好的方法来解决这个问题。谢谢。

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>

和iframe src页面：

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>

推荐答案

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

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?

因为iframe的内容是一个单独的DOM。所以每次iframe加载前一个dom被销毁，处理程序被附加到新的DOM中的元素。

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.

只要使其它页面可以后来添加，而不修改应该很容易的代码。只需将iframe加载的页面中的标记更改为如下所示：

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>

然后调整您的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中显示：block 。

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

这篇关于有没有更好的方法来动态显示包含随机jQuery绑定的iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！