IFRAME跨域

问题:在A域中有文件A,A内嵌一个IFRAME(frame_a),frame_a引用B域中的文件B。在B加载完成后,需要根据B的实际宽,高来确定frame_a的宽高,并剧中显示。于是,需要在文件B中操作frame_a,即存在跨域操作,而JS的安全机制是不允许跨域操作的。

解决思路:在B文件中,内嵌一个IFRAME(frame_b)。frame_b设置成不可见,并引用A域文件C。在文件C中通过parent.parent.document来获得文件A的文档对象。

文件A:

<html>
    <head></head>
    <body>
        <iframe src="http://b/b.html"/>
     <body>
</html>

 

文件B:

  文件B通过引用A域的JS文件d.js来加载A域的文C

<html >
<head>


</head>
<body  style="margin: 0px;padding: 0px;background-color: white;">

  <p>文件B </p>  



<script  type="text/javascript" src="http://a/d.js"></script> 
</body>

</html>
 

  

d.js:

function calcPageHeight(doc) { 
    var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) 
    var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) 
    var height  = Math.max(cHeight, sHeight) 
    return height 
} 


function calcPageWidth(doc) { 
    var cWidth = Math.max(doc.body.clientWidth, doc.documentElement.clientWidth) 
    var sWidth = Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth) 
    var width  = Math.max(cWidth, sWidth) 
    return width 
} 
window.onload = function() { 
    var doc = document ;
    var height = calcPageHeight(doc) ;
    var width = calcPageWidth(doc) 
   
    var myifr =  doc.createElement("iframe");
   	doc.body.appendChild(myifr);
   	myifr.style.display="none";
    if (myifr) { 
        myifr.src = 'http://a/c.html?height=' + height+'&width='+width; 
     
    } 
}; 

文件C:

<!DOCTYPE html> 
<html> 
  <head> 
 
    <meta charset='utf-8' /> 
    <title>C.html</title> 
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
  </head> 
  <body> 
    <script type="text/javascript"> 
        window.onload = function() { 
            var isSet = false
            var inteval = setInterval(function() { 
                var search = location.search.replace('?', '') 
                if (isSet) { 
                    clearInterval(inteval) 
                    return   
                } 
                if (search) { 
                	var searchh=search.split('&')[0];
                	var searchw=search.split('&')[1];
                    var height = searchh.split('=')[1];
                 	var width = searchw.split('=')[1];
                 	
                 	var left=Math.max((window.screen.availWidth-width)/2,0);
                 	var top=Math.max((window.screen.availHeight-height)/2,0);
                 
                    var doc = parent.parent.document; 
                    var ifr = doc.getElementById('adv') 
                    
                    $(ifr).animate({height:height+"px",width+"px",left:left+"px",top:top+"px"});
                    isSet = true
                } 
            }, 500) 
        } 
    </script> 
  </body> 
</html>

  

原文地址:https://www.cnblogs.com/jlx1/p/4623760.html