iframe之嵌套方案总结

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

大体流程时，我们想要实现通过外站引入一个脚本后，输出我们的产品内容到对方站上。所以我们的脚本是用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>

iframe之嵌套方案总结相关推荐

iframe页面嵌套问题
iframe页面嵌套问题开发工具与关键技术:VisualStudio C# 作者:落灵撰写时间:2019/6/8 一. iframe的框架根据内容自适应高度 iframe是在项目设计中经常用到的框 ...
h5 iframe嵌套页面_关于解决iframe标签嵌套问题的解决方法
问题描述当我们使用easyui做后台管理系统的时候,会使用tree组件来实现树形菜单,而我们每点击一次相应菜单,会根据是否有url来判断是否是一级菜单,以及是否已经存在 //根据该节点名字判断该节点 ...
几种location.href的区别 js实现网页防止被iframe框架嵌套功能 .
首先我们了解一下:window.location.href.location.href.self.location.href.parent.location.href.top.location.hre ...
js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下首先我们了解一下:window.locat ...
iframe多层嵌套时获取元素总结
父页面获取子页面元素: 注意:onload事件 jQuery获取: $("iframe").contents().find("holder")......; ( ...
iframe框架_性能优化去除iframe脚手架升级方案
<去Iframe后领域本地调试指南> 首先理解去Iframe之后的前端模型去Iframe之前,每个领域有独立的Node端和静态资源.通过 iframe 的方式内嵌在工作台中,与工作台.其 ...
html5父子页面数据传递,使用iframe标签嵌套页面时如何进行父子页面通讯/传值...
父页面使用iframe标签引入子页面 (使用本地文件) 父页面 function myFunction(e) { console.log("我是父页面的方法") } 引入本地路径的 ...
iframe嵌套的html高度,iframe 多层嵌套无限嵌套高度自适应的解决方案
有A,B,C三个页面,A页面包含B页面,B页面包含C页面.A页面随着B页面自适应,C页面随着B页面自适应 A页面复制代码代码如下: οnlοad="this.height=main.doc ...
html标签没有空间点击事件,iframe内嵌套的textarea标签没有鼠标点击事件怎么办
是不是输入关键字就可以找到最有用的信息,当然不是,使用搜索引擎是有技巧的,下面我们看看百度和搜狗给大家介绍的搜索技巧前言代码全是放在新建板块的评论里贴代码的同时建议把图片和网址栏清空背景皮肤 ...

iframe之嵌套方案总结

iframe之嵌套方案总结相关推荐

最新文章

热门文章