码迷,mamicode.com
首页 > 其他好文 > 详细

同一页面的两个Iframe获取数据

时间:2017-08-25 12:23:54      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:获取数据   log   copyto   tag   idt   views   ati   boa   ora   

首先页面:

<td  style="width: 50%" valign="top">
    <iframe name="xxx"
        id="xxx" frameborder="0"
        src="xxxxxxx" 
        style="margin: 0 auto; width: 100%; height: 100%;">
  </
iframe> </td> <td style="width: 50%" valign="top"> <iframe name="treeFrame" id="treeFrame" frameborder="0" src="xxxxxx" style="margin: 0 auto; width: 100%; height: 100%;">
  </
iframe> </td>

此时左侧的IFrame想要获取到右侧的Iframe中的数据:

var x = window.parent.document.getElementById("treeFrame");  
var right = (x.contentWindow || x.contentDocument);  
if(right.document){  
  right = right.document;  
} 

window.parent为父窗口。

注意使用 contentWindow 和 contentDocument 属性。

此时 right 就可以看做是 右侧Iframe的 document对象了。

即:通过right对象来 获取右侧iframe的数据。

如:

var obj = right.getElementsByTagName("input");  

首先页面:

 

[html] view plain copy
 
  1. <td  style="width: 50%" valign="top">  
  2.     <iframe name="xxx"  
  3.         id="xxx" frameborder="0"  
  4.         src="xxxxxxx"   
  5.         style="margin: 0 auto; width: 100%; height: 100%;"></iframe>  
  6. </td>  
  7. <td  style="width: 50%" valign="top">  
  8.     <iframe name="treeFrame"  
  9.         id="treeFrame" frameborder="0"  
  10.         src="xxxxxx"   
  11.         style="margin: 0 auto; width: 100%; height: 100%;"></iframe>  
  12. </td>   

 

 

此时左侧的IFrame想要获取到右侧的Iframe中的数据:

 

[html] view plain copy
 
  1. var x = window.parent.document.getElementById("treeFrame");  
  2. var right = (x.contentWindow || x.contentDocument);  
  3.       if(right.document){  
  4.       right = right.document;  
  5.   }z  

 

 

window.parent为父窗口。

注意使用 contentWindow 和 contentDocument 属性。

 

此时 right 就可以看做是 右侧Iframe的 document对象了。

即:通过right对象来 获取右侧iframe的数据。

如:

 

[html] view plain copy
 
  1. var obj = right.getElementsByTagName("input");  

同一页面的两个Iframe获取数据

标签:获取数据   log   copyto   tag   idt   views   ati   boa   ora   

原文地址:http://www.cnblogs.com/henuyuxiang/p/7426829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!