jquery load方法把一个页面载入到主页面的一个div中替换iframe

jquery load方法把一个页面载入到主页面的一个div中,载入页面的javascript消失了 


如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

 

调用load方法的完整格式是:load( url, [data], [callback] ),

其中:

 

  • url:是指要导入文件的地址。
  • data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
  • callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。

1、index.html里面有两个div,一个是id是menu,另一个是work,代码如下 

<html> 
<head> 
   <script type="text/javascript" src="jquery.js"></script> 
   <script type="text/javascript" src="index.js"></script> 
</head> 

<body> 
<div id="menu"> 
<input type="button" id="btnMenu" value="menu1"> 
</div> 
  <div id="work"> </div> 
</body> 
</html> 

2、在index.js中对btnMenu绑定事件 

$(document).ready(function(){ 

$("#btn1").click(function () { 
$("#work").load("load.html"); 
}); 
}); 

3、被载入的页面load.html只包含一个按钮,代码如下: 
<html> 
<head> 
   <script type="text/javascript" src="jquery.js"></script> 
   <script type="text/javascript" src="load.js"></script> 
</head> 

<body> 
<input type="button" id="btn" value="menu1"> 
</body> 
</html> 

4、在load.js中对btn绑定事件 
$(document).ready(function(){ 

$("#btn").click(function () { 
alert("btn1"); 
}); 
}); 

5、测试结果是,在IE6和firefox中都可以正常载入load.html,但firefox中点击load.html的按钮不会执行alert("btn1"),IE6可以。 

6、问题是怎么样才能使firefox中也能执行btn的点击事件。好像所有在load.js里的代码都失效了。谢谢大家! 





问题补充:
把index.js和load.js合并成一个,2个页面共同调用 
// 
1、把index.js和load.js合并成一个,也必须在载入load.html后重新绑定事件才行。 
2、如果要重新绑定,为了方便必须使用非匿名的function,管理这些非匿名function也是一个头大的问题,特别是当应用比较大的时候。 
3、如果想针对load.html单独测试,就是不用index.html进行load直接测试load.html就没有办法了,因为load.html并不包含javascript(如果包含了IE会执行两次事件).
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值