怎么调整iframe的位置（修改iframes内元素的样式）

前言：网页可以使用iframe元素嵌入其他页面
    
    
    
    
，因此一个页面之中会存在多个窗口；在子页面中     


     


     


     


，又可以嵌入别的页面 




 




 




 




 ，从而形成多级窗口    
    
    
    
。 iframe元素遵守同源策略

   

   

   

   
，只有当父页面与框架页面来自同一个域名     

     

     

     

，两者之间才可以通过脚本通信 


     


     


     


     。

        window.top:顶级窗口

        window.parent:父级窗口

        window.self：当前窗口

1    
    
    
    
、对于iframe嵌入的窗口  




  




  




  




 ，通过document.getElementById方法可以拿到该窗口的DOM节点


  


  


  


  
，然后使用content.Window属性获得iframe节点包含的window对象     
     
     
     
，使用contentDocument属性获得包含的document对象

2 


     


     


     


     、在iframe窗口内部   




   




   




   




 ，使用window.parent引用父窗口

 




 




 




 



。如果没有父窗口则返回自身

3

 




 




 




 



、iframe嵌入窗口的window对象



 



 



 



 
，存在一个frameElement属性                    ，返回它在父窗口中的DOM节点

一   

   

   

   

、在当前窗口中获取父级窗口进行样式修改

parent //获取父窗口 （等同于window.parent） .document //获取父级窗口的document文档 .getElementById(box) //获取父级窗口中id为box的DOM元素 .style .background=red //修改DOM元素的背景色

二  

     

     

     

    、在当前窗口中获取通过iframe为引入的页面(iframe标签的id属性是li)

document.getElementById(li).onload = function(){ //通过inload事件监测iframe的加载 document.getElementById(li) //获取到iframe .contentWindow //获取到iframe的window .document //获取到iframe的document .getElementById(xoc) //获取iframe中id=‘xoc’的DOM元素 .style .color = green }