iframe之嵌套方案总结

最新推荐文章于 2024-08-01 15:40:11 发布

wondercool

最新推荐文章于 2024-08-01 15:40:11 发布

阅读量7.6k

点赞数

本文链接：https://blog.csdn.net/xiaoxigua666/article/details/50506068

版权

前段项目中有一个比较变态的需求，之所以变态，是因为我们的产品展示方案基于维护和安全考虑做的比较复杂。

大体流程时，我们想要实现通过外站引入一个脚本后，输出我们的产品内容到对方站上。所以我们的脚本是用js document.write了一个iframe页面，此iframe页面 A 就是我们的产品业务：

document.write('<iframe name="A" id="A" width="100%" height="90" scrolling="no" align="center,center" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" src="A"></iframe>');

此iframe A 内要实现的功能有加载另一个网页iframe B , B页面脚本实现种植cookie到当前域。当前域拿到此cooke后，再输出以此cookie为属性做src的iframe 页面 C。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">body{margin:0;padding:0}</style>
</head>
<body>
<iframe id="B" width="0" height="0" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="position:absolute;left:-1000px" src="http://iframe page B ，种植cookie到当前域下"></iframe>
<script>
var oFrame = document.getElementById('B');
oFrame.onload = oFrame.onreadystatechange = function() {
    if (this.readyState && this.readyState != 'complete') return;
    else{
    document.write('<iframe name="C" id="C" width="100%" height="100%" scrolling="no" align="center,center" frameborder="0" allowtransparency="true" marginheight="0" marginwidth="0" src="C ,以取到的 B页面种植的cookie为参考生成url"></iframe>');
    }
    document.close();
}
</script>
</body>
</html>

iframe C 页面为最终的产品业务内容。在 C页面内又通过空 iframe D + form的方式实现跨域提交数据。

    <!DOCTYPE html>
    <html>
    <head>
    <title>奇迹推广-360点睛营销平台</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body, div, dl, dt, dd, ul, ol, li, pre, code, form, input, textarea, p, th, td {
        margin: 0;
        padding: 0
    }
    body {
        background: #fff;
        color: #333;
        font: 14px/1.5 arial, 宋体, georgia, verdana, helvetica, sans-serif
    }
    ol, ul {
        list-style: none outside none
    }
    a, img {
        border: 0 none;
    }
    .clearfix {
        clear: both
    }
    .clearfix:after {
        clear: both;
        display: block;
        visibility: hidden;
        height: 0;
        content: " "
    }
    .e_qiji_idea_box {
        position: relative;
        width: 960px;
        height: 90px;
        overflow: hidden
    }
    .icon_hot {
        position: absolute;
        top: 0;
        right: 0;
        width: 39px;
        height: 39px;
        background: url(http://p1.qhimg.com/t01a4d1689cc36754c7.png)
    }
    .logo {
        display: block;
        position: absolute;
        bottom: 1px;
        right: 0;
        height: 18px
    }
    .e_qiji_idea {
        overflow: hidden;
        padding: 0;
        border: 1px solid #e6e6e6
    }
    .e_qiji_idea a {
        color: #333;
        text-decoration: none
    }
    .e_qiji_idea a em {
        text-decoration: none
    }
    .e_tab_cont {
        display: none;
        overflow: hidden
    }
    .e_tab_btn {
        float: left;
        display: inline-block;
        width: 50px;
        margin: 5px 0 0 10px
    }
    .e_tab_btn a {
        float: left;
        display: inline-block;
        margin: 4px 0 3px;
        width: 48px;
        height: 17px;
        line-height: 17px;
        border: 1px solid #e8e8e8;
        background-color: #fff;
        color: #999;
        text-align: center;
        text-decoration: none
    }
    .e_tab_btn a.cur {
        background: url(http://p5.qhimg.com/t013a3b67988b96ad5c.png) #f63 no-repeat 42px 6px;
        border: 1px solid #f93;
        color: #fff
    }
    .e_tab_btn a:hover {
        background: url(http://p5.qhimg.com/t013a3b67988b96ad5c.png) #f63 no-repeat 42px 6px;
        border: 1px solid #f93;
        color: #fff
    }
    .e_qiji_idea .e_tab_cont_box {
        float: left;
        display: inline-block;
        width: 400px;
        height: 88px
    }
    .e_tab_cont_box a:hover {
        color: red;
        text-decoration: underline
    }
    .e_tab_cont_box div {
        display: none
    }
    .e_tab_cont_box div.cur {
        display: block
    }
    .e_cont_ul {
        overflow: hidden;
        margin: 0;
        padding: 0
    }
    .e_cont_ul li {
        float: left;
        display: inline-block;
        overflow: hidden;
        margin: 7px 5px 0 15px;
        _margin: 7px 5px 0 8px;
        padding-left: 13px;
        width: 100px;
        height: 19px;
        background: url(http://p3.qhimg.com/d/inn/db58c157/sprite.png) no-repeat 0 -75px;
        word-wrap: break-word;
        word-break: break-all;
        text-overflow: ellipsis;
        word-spacing: nowrap
    }
    </style>
    <body>
    <div id="e_qiji_idea_box" class="e_qiji_idea_box clearfix"> <span class="icon_hot"></span> <a title="360点睛营销平台" href="" target="_blank" class="logo" id="logo"><img src="http://p9.qhimg.com/d/di/slogo_0709.png" οnmοuseοver="this.src ='http://p0.qhimg.com/d/di/logo_0709.png'" οnmοuseοut="this.src ='http://p9.qhimg.com/d/di/slogo_0709.png'"></a>
        <div class="e_qiji_idea">
            <div class="e_tab_btn" tabfor="e_tab_cont_box"> <a href="" tagid="70" asin=""
                class="cur" bsendpv="1" >游戏</a> <a href="" tagid="76" asin=""
                bsendpv="0" >旅游</a> <a href="" tagid="15" asin=""
                bsendpv="0" >购物</a> </div>
            <div id="e_tab_cont_box" class="e_tab_cont_box">
                <div  class="cur" >
                    <ul class="e_cont_ul">
                        <li><a href="" e_href="" target="_blank">全部装备靠打</a></li>
                        <li><a href="" e_href="" target="_blank">2015新版传奇</a></li>
                        <li><a href="" e_href="" target="_blank">无人民币玩家</a></li>
                        <li><a href="" e_href="" target="_blank">非RMB玩家进</a></li>
                        <li><a href="" e_href="" target="_blank">砍一刀升一级</a></li>
                        <li><a href="" e_href="" target="_blank">爆极品装备</a></li>
                        <li><a href="" e_href="" target="_blank">传奇120级</a></li>
                        <li><a href="" e_href="" target="_blank">2016新版传奇</a></li>
                        <li><a href="" e_href="" target="_blank">无RMB战士</a></li>
                    </ul>
                </div>
                <div   >
                    <ul class="e_cont_ul">
                        <li><a href=http://www.tuniu.com/?p=13497&utm_source=360&utm_medium=cpc&utm_campaign=360qj#level=3 e_href="" target="_blank">途牛特价出境</a></li>
                        <li><a href=http://u.ctrip.com/union/CtripRedirect.aspx?TypeID=2&Allianceid=6491&sid=726807&OUID=100003&jumpUrl=http://flights.ctrip.com/#level=3 e_href="" target="_blank">携程飞机票</a></li>
                        <li><a href=http://u.ctrip.com/union/CtripRedirect.aspx?TypeID=2&Allianceid=6491&sid=448808&OUID=&jumpUrl=http://vacations.ctrip.com/deals/a21.html#level=3 e_href="" target="_blank">携程天天低价</a></li>
                        <li><a href=http://card.cgbchina.com.cn/subsite/201506/19932836/002760/xqy_card_xc.html?utm_source=360&utm_medium=cpc&utm_term=%E6%90%BA%E7%A8%8B%E4%BF%A1%E7%94%A8%E5%8D%A1&utm_campaign=%E7%8C%9C%E4%BD%A0%E5%96%9C%E6%AC%A2%2D%E6%97%85%E6%B8%B8#level=3 e_href="" target="_blank">携程信用卡</a></li>
                        <li><a href=http://www.5fen.com/aodaliya/tejia/#level=3 e_href="" target="_blank">澳大利亚特价</a></li>
                        <li><a href=http://u.ctrip.com/union/CtripRedirect.aspx?TypeID=2&Allianceid=6491&sid=448808&OUID=&jumpUrl=http://vacations.ctrip.com#level=3 e_href="" target="_blank">携程旅游</a></li>
                        <li><a target="_blank" href="" e_nolog=0 >旅游线路</a></li>
                        <li><a target="_blank" href="" e_nolog=0 >云南旅游社</a></li>
                        <li><a target="_blank" href="" e_nolog=0 >鼓浪屿酒店</a></li>
                    </ul>
                </div>
                <div   >
                    <ul class="e_cont_ul">
                        <li><a href="" e_href="" target="_blank">苏宁清仓甩</a></li>
                        <li><a href=http://www.beibei.com/?utm_source=360dj2&utm_medium=wencpc&utm_content=gwpp&utm_campaign=gw_bbtmw#level=3 e_href="" target="_blank">贝贝特卖网</a></li>
                        <li><a href="" e_href="" target="_blank">这家具值哭了</a></li>
                        <li><a href=http://www.zisha.com/quanshougong/?ozs=134192-1981#level=3 e_href="" target="_blank">手工紫砂壶</a></li>
                        <li><a href=http://www.365dmr.com/go/kk01-baicu/?cid=kk01-4-4#level=3 e_href="" target="_blank">成功瘦到90斤</a></li>
                        <li><a href=http://www.meilele.com/special/201503-1022.html#se=qc3!XNJ-!QEB6E5A5B7E58!H-!Q4ADE8B9A9E78!H-2!QAA7E7B!H!X!QEB6E5A5B7E58!H3-J-!X!QEBFE4BE9CE5AE9EE5ACA8E69EB6E5A5B7E58!H#level=3 e_href="" target="_blank">便宜实木家具</a></li>
                        <li><a href=http://www.meilele.com/special/201504-1041.html#se=qc!XKJ-!QEA2E5AE85E58!H-!Q4ADE8B9A9E78!H-3!QAA7E7B!H!X!QEA2E5AE85E58!H1-J2-!X!QEA2E5AE85E58EB6E5A5B7E58885E6BB93E4B!H#level=3 e_href="" target="_blank">客厅家具清仓</a></li>
                        <li><a href=http://www.che6che5.com/goods/allCat.html#level=3 e_href="" target="_blank">2元云购汽车</a></li>
                        <li><a href=http://cps.jiuxian.com/cpspublic/cps.htm?src=sem&code=360cnxx11&url=http://www.jiuxian.com/?ozs=333447-1722#level=3 e_href="" target="_blank">一元抢美酒</a></li>
                    </ul>
                </div>
            </div>
            <div class="e_tab_btn" tabfor="e_tab_cont_box1" style="padding-left:10px;border-left:1px dashed #eee"> <a href="" tagid="80" asin=""
                class="cur" bsendpv="1" >财经</a> <a href="" tagid="53" asin=""
                bsendpv="0" >生活</a> <a href="" tagid="46" asin=""
                bsendpv="0" >汽车</a> </div>
            <div id="e_tab_cont_box1" class="e_tab_cont_box">
                <div  class="cur" >
                    <ul class="e_cont_ul">
                        <li><a href=http://campaign.rong360.com/sem/37/index.html?utm_source=360&utm_medium=ad2DK3&utm_campaign=Caijing-JX10WDK921#level=2 e_href="" target="_blank">急需10万贷款</a></li>
                        <li><a href=http://campaign.rong360.com/sem/37/index.html?utm_source=360&utm_medium=ad2dk4&utm_campaign=Caijing-dxxydk#level=2 e_href="" target="_blank">低息信用贷款</a></li>
                        <li><a href=http://www.newunion.cn/transformation.do?param=c29e397c262fae11&hmsr=360dhwz&hmmd=&hmpl=&hmkw=&hmci=&ozs=578-2243#level=3 e_href="" target="_blank">告别死工资</a></li>
                        <li><a href=http://weijinsuo.com/extension.do?src=360cainibailing/12#level=3 e_href="" target="_blank">理财首选</a></li>
                        <li><a href=http://xindai.yixin.com/?utm_source=daohang&utm_medium=xd-ppc&utm_term=%E6%97%A0%E6%8A%B5%E6%8A%BC%E8%B4%B7%E6%AC%BE&utm_content=%E6%96%87%E5%AD%97&utm_campaign=%E8%B4%A2%E7%BB%8F-%E6%8A%A2#level=3 e_href="" target="_blank">无抵押贷款</a></li>
                        <li><a href=http://www.jinshangdai.com/subject/register1/register.html#level=3 e_href="" target="_blank">教你怎样赚钱</a></li>
                        <li><a href=http://cps.yirendai.com/promotion/5069429#level=3 e_href="" target="_blank">身份证贷款</a></li>
                        <li><a href=http://www.jinshangdai.com/subject/register1/register.html#level=3 e_href="" target="_blank">最牛的理财</a></li>
                        <li><a href=https://www.zrcaifu.com/register-promotion-new?_adv=dh_360c_a006#level=3 e_href="" target="_blank">P2P理财</a></li>
                    </ul>
                </div>
                <div   >
                    <ul class="e_cont_ul">
                        <li><a href=http://cps.yirendai.com/promotion/5069383#level=2 e_href="" target="_blank">宜人贷借款网</a></li>
                        <li><a href=http://www.jinshangdai.com/subject/register1/register.html#level=3 e_href="" target="_blank">靠谱赚钱法</a></li>
                        <li><a href=http://www.gwfx.com/lp_zq_v6.html?utm_source=360daohang&utm_medium=ad&utm_campaign=shenghuo&utm_content=sh1&utm_term=wz100#level=3 e_href="" target="_blank">怎么赚钱最快</a></li>
                        <li><a href=http://www.jinshangdai.com/subject/register1/register.html#level=3 e_href="" target="_blank">赚钱新招</a></li>
                        <li><a href=http://www.che6che5.com/static/zt/3/zt_car.htm#level=3 e_href="" target="_blank">最低2元买车</a></li>
                        <li><a href=http://bj.lianjia.com/ershoufang/?utm_source=360&utm_medium=cainixihuan&utm_term=dijiaershoufang&utm_content=shenghuo&utm_campaign=wenzi#level=3 e_href="" target="_blank">低价二手房</a></li>
                        <li><a href=http://www.365dmr.com/go/kk04-baicu/?cid=kk04-4-7#level=3 e_href="" target="_blank">吃姜瘦到90斤</a></li>
                        <li><a href=http://www.lol99.com/reg/new1.php?s911#level=3 e_href="" target="_blank">事业单位相亲</a></li>
                        <li><a href=http://www.78.cn/?sourceid=946&JJID=V550a6d8032b29163184705&mediaid=5#level=3 e_href="" target="_blank">加盟创业</a></li>
                    </ul>
                </div>
                <div   >
                    <ul class="e_cont_ul">
                        <li><a href=http://www.xin.com/sale/?channel=360cnxh#level=3 e_href="" target="_blank">个人卖二手车</a></li>
                        <li><a href=http://tgg36.sagetrc.com/trc/track/x.gif?acc=24177&iid=g.154610292000055006.k.e&lpg=http%3a%2f%2fwww.pahaoche.com%2fcampaign%2f20150227002%2findex.w%3fch%3dyy-360dh-131217-001&md=1&ver=1.4#level=3 e_href="" target="_blank">二手车转让</a></li>
                        <li><a href=http://www.4008000000.com/cpchexian/sem/jingpinci201404.shtml?WT.mc_id=C03-360DJ-09-245&WT.srch=1#level=3 e_href="" target="_blank">车险价格暴跌</a></li>
                        <li><a href=http://bj.tuanche.com/?c=3s02PENC#level=3 e_href="" target="_blank">低价购车北京</a></li>
                        <li><a href=http://www.4008000000.com/cpchexian/sem/duosheng.shtml?WT.mc_id=C03-360DJ-12-004&WT.srch=1#level=3 e_href="" target="_blank">平安车险降价</a></li>
                        <li><a href=http://www.baixing.com/?bannerId=1912&profile=pianyiershouche#level=3 e_href="" target="_blank">便宜二手车</a></li>
                        <li><a href=http://www.che6che5.com/#level=3 e_href="" target="_blank">平民跑车</a></li>
                        <li><a target="_blank" href="" e_nolog=0 >违章查询</a></li>
                        <li><a target="_blank" href="" e_nolog=0 >拆车坊</a></li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <iframe width="0" height="0" id="e_idea_frame-2835804914766094623" name="e_idea_frame-2835804914766094623" frameborder="0" scrolling="no" style="display:none"></iframe>
    <form action="http://*****/guess/vt?ip=10.18.101.151&mid=ae3c6e489bbbf9c97550334bbb8d3dfa&cid=50&pid=213&ls=" style="display:none" method="post" id="e_idea_form" target="e_idea_frame-2835804914766094623">
        <input id="asin" type="hidden" name="asin" value="" />
    </form>
    <script type="text/javascript"> 
            (function(exports){
                function tabPlay(options) {
                    this.options = options;
                    var options = this.options;
                    var __self__ = this;
                        __self__.init();
                }
                tabPlay.prototype={
                    init:function(){
                        this.addhandler();
                    },
                    addhandler: fAddhandler
                };
                function fAddhandler () {
                    var __self__ = this;
                    var divele = __self__.options.obj.parentNode.getElementsByTagName('div');
                    var contraldiv = null,contralbtn=null;
                    var ap = __self__.options.obj.getElementsByTagName('div');
                    for(var j =0;j<divele.length;j++){
                        if(divele[j].getAttribute('tabfor') == __self__.options.obj.id){
                            contraldiv = divele[j];
                        }
                    }
                    contralbtn = contraldiv.getElementsByTagName("a");
                    for(var k=0;k<contralbtn.length;k++){
                        contralbtn[k].index = k;
                        contralbtn[k].οnmοuseοver=function(){
                            var cur = this.index;
                            this.className='cur';
                            if(this.getAttribute('bsendpv') == "0"){
                                document.getElementById('asin').value = this.getAttribute('asin');
                                fEsendPv();
                            }
                            this.setAttribute("bsendpv","1");
                            for(var q =0;q<ap.length;q++){
                                if(q == cur){
                                    ap[q].className = "cur";
                                }else{
                                    if(ap[q].className == "cur"){
                                        ap[q].className = '';
                                        contralbtn[q].className='';
                                    }
                                }
                            }
                        }
                    }
                    return this;
                }
                exports.tabPlay = tabPlay;
                exports.goPlay = function(options) {
                    var options = options || {
                        obj: document.getElementById('e_tab_cont_box'),
                        source: []
                    }
                    return new tabPlay(options);
                }
            })(this)
            var miracleIdea1 = document.getElementById('e_tab_cont_box');
            var miracleIdea2 = document.getElementById('e_tab_cont_box1');
            var aAsins = [];
            var oAsins = document.getElementsByTagName('a');
            var browser_version=navigator.userAgent.toLowerCase();
            goPlay({obj:miracleIdea1});
            goPlay({obj:miracleIdea2});
            for(var i = 0;i<oAsins.length;i++){
                if(oAsins[i].className == 'cur'){
                    var _thisAsin = oAsins[i].getAttribute('asin');
                    aAsins.push(_thisAsin);
                }
            }
            document.getElementById('asin').value = aAsins.join(';');
            fEsendPv();
            function fEsendPv(){
               var requrl=document.getElementById("e_idea_form").getAttribute("action");
               var asin = "&asin=""asin").value);
               var xmlHttpReq = null;
               if (window.ActiveXObject){
                      xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
               }else if (window.XMLHttpRequest){
                      xmlHttpReq = new XMLHttpRequest();
               }
               if(xmlHttpReq != null){
                      xmlHttpReq.open("POST",requrl,true);
                      xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
                      xmlHttpReq.send(asin);
               }
            }
            function fEsendLog(ele){function r(){return(new Date).getTime()}function i(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n}var e,t,n=(new Date).getTime(),s=document.getElementById(ele),u=function(t){var n=t.target||t.srcElement;if(!n.getAttribute("e_nolog")){e=r()}},a=function(i){var s=i.target||i.srcElement;var ele,elelink;if(!s.getAttribute("e_nolog")){if(s.nodeName=="A"){ele=s}else if(s.parentNode.nodeName=="A"){ele=s.parentNode}else if(s.parentNode.parentNode.nodeName=="A"){ele=s.parentNode.parentNode}else{return}elelink=ele.getAttribute("e_href");t=r();ele.setAttribute("href",elelink+"&st="+n+"&dd="+e+"&ud="+t)}};s&&(i(s,"mousedown",u),i(s,"mouseup",a))};
            fEsendLog("e_tab_cont_box");
            fEsendLog("e_tab_cont_box1");
            </script>
    </body>
    </html>