您的位置：首页 > Web前端 > JQuery

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

2017-03-21 10:14 295 查看


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会执行两次事件).
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                load
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航