iframe跨域例子（前提双方你都可以控制）

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页面A</title>
<script type="text/javascript">
//function init(){
    document.domain = '10.186.78.72';
    //alert('我是主框架，嵌入了第三方应用IframeB,下面开始加载应用');
//var iframeTag = document.getElementById('frameB'),
//iframeSrc = 'b.html';
   
    //iframeTag.src = iframeSrc;
//iframeTag.style.display = 'block';
//};
 
function callback(h){
    //var iframeB = document.getElementById('frameB');
    alert('IframeC调用我（主框架）接口，把IframeB的值传给我，具体值是：' + h);
    //iframeB.style.height= h + 10 + 'px';
//iframeB.src += '#'+ h
};

    function send(){
       //var iframeTag = document.getElementById('frameB');
//var iframeTag = window.frames['frameB'].document;
var iframeTag =  document.getElementById("frameB").contentWindow.window.document.getElementById("vvv").value; 
        alert(iframeTag);

    };
</script>
</head>
<body>
    <p>我是主页框架，我的域是：10.186.78.72</p>
    <input type="text" id="rrr" value = "r"></input>
    <input type="button" onclick="javascript:send();" value="ok">
    <iframe id="frameB" name="frameB" src="http://10.186.78.72/b.html?3" style="display:block;"></iframe>
</body>
</html>

frameB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframeB</title>
    <script type="text/javascript">
    //document.domain = '10.186.78.72';
function send(){
        //alert('我是第三方App，下面开始创建和主框架同域的通信通道IframeC,并设置它的src，用#号传递高度值');
var p = top.document;
       alert(p.getElementById('rrr').value);

                 var iframeTag = document.getElementById('frameC'),
              iframeSrc = 'http://10.186.78.72/c.html#',
              value = document.getElementById('vvv').value;
       
        iframeTag.src = iframeSrc + value;
        iframeTag.style.display = 'block';
       
        //window.setTimeout(function(){
//alert('主页面设置我（IframeB）的src，通过Hash（#）给我传递它收到的高度：' + location.hash);
//},2000);
    };
    </script>
    </head>
    <body>
        <p style="height:500px;">我是三方应用，我的域是：test.com</p>
        <input type="text" id="vvv" value = "ggg"></input>
        <input type="button" onclick="javascript:send();" value="ok">
        <iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
    </body>
    </html>

frameC

<script type="text/javascript">
        document.domain = '10.186.78.72';
        //alert('我（IframeC）收到iframeB通过参数（#）给我传递value值，我现在调用主页面方法去弹出该值');
        alert(1);
        top.callback(window.location.href.split('#')[1]);
    </script>





posted on 2012-01-10 10:05  kudosharry  阅读(243)  评论(0)  编辑  收藏  举报

导航