这有效,但我不确定为什么(而且我很确定有一种更聪明的方法来实现它)。我有一个带有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>
答案 0 :(得分: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
。
答案 1 :(得分:0)
为什么这些绑定在iframe src发生变化时有效?
因为每次iframe源更改都会触发load事件,并且您已为iframe load事件设置处理程序,因此绑定可以正常工作。
在这个运行的时候,这些人对iframe src的所有内容都知之甚少,看起来像是live()而不是bind()?
它不像现场表演。它的工作原理是因为仅当带有iframe的内容被完全加载时才会触发加载。
是'$(“#myframe”)。load(...)'?每次加载iframe时都会运行吗?
是的,每当iframe刷新或源被修改时它都会运行。
为什么每次加载同一页面时绑定都不会加倍?
绑定不会加倍,因为使用iframe附加到内容。当内容被替换时,绑定也会丢失。