ifream爱恨情缘

开幕场景

iframe.html

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7. <body>  
  8.     <a href="javascript:;" onclick="return getIframeDocument()">get iframe input value</a>  
  9.     <div class="content" id="content">  
  10.        <iframe scrolling="no" frameborder="0" src="inner.html" class="comnet" name="comnet" id="comnet"></iframe>  
  11.     </div>  
  12.       
  13. <script type="text/javascript">  
  14. function getIframeDocument(){  
  15.     var iframe = document.getElementById('comnet');  
  16.     var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;  
  17.     if(iframeDocument){  
  18.         alert(iframeDocument.getElementById('first').value);      
  19.     }else{  
  20.         alert("oops!");  
  21.     }  
  22.     return false;  
  23. }  
  24.   
  25. window.onload=function(){  
  26.     //取iframe  
  27.     var iframe = document.getElementById('comnet');  
  28.     var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;  
  29.     if(iframeDocument){  
  30.         alert(iframeDocument.getElementById('first').value);      
  31.     }else{  
  32.         alert("oops!");  
  33.     }  
  34. };  
  35. </script>  
  36. </body>  
  37. </html>  


inner.html

[html] view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>this is iframe document</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div id="mainright">ddd</div>  
  10. <div><input type="text" id="first" value="ccc"/></div>  
  11.   
  12. </body>  
  13. </html>  


对白一：chrome我有我的要求
首先把上面的两个html放在非host上,也就是用file:///{path}/iframe.html来访问，当然inner.html也要和它在平级目录，你发现javascript不工作，
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match. 


但当他们放到一个站点内它又满血复活.


原因: Chrome会把本地iframe 也当成是跨域


对白二: ie我会72变
在ie6和ie7中对contentDocument不支持，还好ie的版本都支持contentWindow，frames  因此需要下面的代码：

[javascript] view plain copy
  1. iframe.contentDocument || iframe.contentWindow.document  


但ie10(我的电脑只有ie10)和firefox都可以在用file:///{path}/iframe.html来访问。另外如果把上面的js换成

[javascript] view plain copy
  1. var iframe = window.frames["comnet"];  
  2.   
  3. if(iframe.document){  
  4.     alert(iframe.document.getElementById('first').value);     
  5. }else{  
  6.     alert("oops!");  
  7. }  


发现在ie10中，上面的代码在window.onload事件处理函数中是没有任何效果的。是代码有问题吗？但把它们放到getIframeDocument函数中它又可以工作


对白三: firefox我忠贞如一
上面的ie10问题,chrome问题，在firefox上都没问题


posted @ 2016-05-05 21:31  巴蒂青葱  阅读(220)  评论(0)  编辑  收藏  举报