window.name iframe跨域（学会iframe并用其解决跨域问题）

了解iframe

官方定义为：iframe是HTML标签 
    
    
    ，作用是文档中的文档
     


     


     


，或者浮动的框架(FRAME)    
    
    
。iframe元素会创建包含另外一个文档的内联框架（即行内框架）  


     


     


    。

简单理解为：iframe是一个内联框架 




 




 




，可以在当前HTML页面中嵌入另一个文档


 




 




 


。

iframe的属性

这里只介绍常用属性

name:规定 <iframe> 的名称   

   

   

。

width:规定 <iframe> 的宽度   

     

     

   。

height:规定 <iframe> 的高度



  




  




  

。

src:规定在 <iframe> 中显示的文档的 URL  


  


  


。

frameborder:HTML5 不支持    
     
     
  。规定是否显示 <iframe> 周围的边框




   




   




   
。属性值为1或者0 

   

   

   ，1代表有边框
     

     

     

，0代表无边框 



 



 



。

scrolling:HTML5 不支持                。规定是否在 <iframe> 中显示滚动条




    




    




    。属性值为yes 
    
    
    、no
     


     


     


、auto















。

align:HTML5 不支持               。HTML 4.01 已废弃 



     



     



     。 规定如何根据周围的元素来对齐 <iframe>















。属性值有left 




 




 




、right 

   

   

   、middle
     

     

     

、top  




  




  




、bottom

简单演示：

<h1>演示iframe的使用</h1> <iframe src="http://www.bilibili.com" name="ifr" frameborder="1" height="400" width="600" scrolling="no">你的浏览器不支持该iframe标签</iframe>

我们设置了一个名为ifr  




  




  




，宽为600 


  


  


  ，高为400
     
     
     
，显示边框   




   




   




，隐藏滑动条 



 



 



 ，显示文档为b站（也可以选择本地html文档）的内联框架    
    
    
。 我们可以在iframe标签中写上文字说明               ，因为有一些低版本浏览器不支持这个标签
    




    




    




，显示不了文档的时候就会在页面显示我们写的文字  


     


     


    。

打开浏览器看下效果：

获取iframe内的内容

<h1>演示iframe的使用</h1> <iframe src="./t1.html" id="myiframe">你的浏览器不支持该iframe标签</iframe> <script> //获取iframe标签 var myiframe=document.querySelector("#myiframe") //获取它的window对象 var mywindow=myiframe.contentWindow //获取它的document对象 var mydocument=mywindow.document </script>

解决跨域问题

1 


  


  


  、document.domain+iframe

这个方法只能用于同一个主域下不同子域之间的跨域请求














，比如a.com和1.a.com 之间                ，1.a.com和2.a.com 之间


 




 




 


。

只要把两个页面的document.domian都指向主域就可以了
     



     



     



，比如document.domain="a.com"   

   

   

。

父页面通过iframe嵌入子页面














，通过iframe.contentWindow获取子页面的window,即可操作子页面 
    
    
    ，子页面通过parent.window和parent来访问父页面的window   

     

     

   。

写个例子：

//父页面http://a.com/a.html <iframe id="myiframe" src="http://1.a.com"></iframe> <script> document.domain="a.com" var myiframe=document.queryselector("#myiframe") var name1=1 //获取子页面的属性 var name22 = myiframe.contentWindow.name2; </script> //子页面 http://1.a.com/b.html document.domain="a.com" var name2=2 //获取父页面的属性 var name11=parent.window.name1

2
     
     
     
、window.name+iframe

实现是基于window.name传递数据



  




  




  

。name 在浏览器环境中是一个全局window对象的属性

当在 iframe 中加载新页面时
     


     


     


，name 的属性值依旧保持不变  


  


  


。