javascript实现跨域刷新

在XX项目里面需要通过一个iframe去刷新同一窗口的另外一个iframe。一个超级简单的处理，但我还在blog上记一记，有些看似简单的东西，在真实项目应用中还是值得思考地方

三个页在同一个窗口，分别为main.htm，left.htm和right.htm。

main.htm

代码

   
     

    
      
    
      <
    
      html
    
      >
    
      

    
      <
    
      head
    
      >
    
      

    
      <
    
      title
    
      >
    
      实现跨
    
      </
    
      title
    
      >
    
      

    
      </
    
      head
    
      >
    
      


    
      <
    
      body
    
      >
    
      

    
      <
    
      div
    
      >
    
      主窗口
    
      </
    
      div
    
      >
    
      


    
      <
    
      iframe 
    
      id
    
      ="left"
    
       name
    
      ="left"
    
       width
    
      ="500px"
    
       height
    
      ="300px;"
    
       src
    
      ="left.htm"
    
       
    
      ></
    
      iframe
    
      >
    
      

    
      <
    
      iframe 
    
      id
    
      ="right"
    
       name
    
      ="right"
    
       width
    
      ="100px"
    
       height
    
      ="100px;"
    
       src
    
      ="right.htm"
    
       
    
      ></
    
      iframe
    
      >
    
      


    
      </
    
      body
    
      >
    
      


    
      </
    
      html
    
      >
   
     

 

left.htm

  
    

   
     
   
     <
   
     html
   
     >
   
     
 
   
     <
   
     head
   
     ><
   
     title
   
     >
   
     左边
   
     </
   
     title
   
     ></
   
     head
   
     >
   
     
 
   
     <
   
     body
   
     >
   
     
 
   
     <
   
     div
   
     >
   
     我是左边
   
     </
   
     div
   
     >
   
     
 
   
     <
   
     div
   
     ><
   
     img 
   
     src
   
     ="http://www.enjoymyself.info/images/buysc.jpg"
   
      alt
   
     =" "
   
      
   
     /></
   
     div
   
     >
   
     
 
   
     </
   
     body
   
     >
   
     

   
     </
   
     html
   
     >
  
    

right.htm

代码

   
     

    
      
    
      <
    
      html
    
      >
    
      
 
    
      <
    
      head
    
      ><
    
      title
    
      >
    
      右边
    
      </
    
      title
    
      ></
    
      head
    
      >
    
      
 
    
      <
    
      body
    
      >
    
      
 
    
      <
    
      div
    
      >
    
      
 
    
      <
    
      input 
    
      onclick
    
      ="onclickRefresh();"
    
       type
    
      ="button"
    
       value
    
      ="提交"
    
       
    
      /></
    
      div
    
      >
    
      
 
    
      <
    
      script 
    
      type
    
      ="text/javascript"
    
      >
    
      
 
    
      function
    
       onclickRefresh()
 {
 parent.frames[ 
    
      "
    
      left
    
      "
    
      ].location.reload();
 
    
      //
    
      window.left.location.reload();
    
      

    
       }
 
    
      </
    
      script
    
      >
    
      
 
    
      </
    
      body
    
      >
    
      
 

    
      </
    
      html
    
      >
   
     

看到right.htm里面

function onclickRefresh()通过 parent.frames["left"].location.refresh();来实现右边页面刷新左边页面.

如果在主页面加

  
    

   
     
   
     <
   
     div
   
     ><
   
     input 
   
     type
   
     ="button"
   
      onclick
   
     ="mainRefresh();"
   
      value
   
     ="主提交"
   
      
   
     /></
   
     div
   
     >
   
     

   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     
 
   
     function
   
      mainRefresh()
 {
 window.left.location.reload();
 }
 
   
     </
   
     script
   
     >
  
    

则可以通过主页面刷新子页面。

虽然这样可以超级简单的实现的目的，但是实际项目中，数据不会是这么简单的，最常见是左\右树，目录树的创建加载(如创建一千个节点)本来就是比较耗资源。如果还是通过方式来刷新左右页面，效率之低可见而知，那么是不是可以通过其他方式来实现跨域刷新或者提交呢？

我所想到的是通过ajax实现数据局部加载。而不是整个树的加载。另外通过jquery的json处理方式也可实现局部数据的更新。

不知道还有没有其他更高效的方法？1000个节点的树加载，效率值得思考的问题。