iframe之嵌套方案总结
来源：互联网 发布：第一财经大数据 编辑：程序博客网 时间：2024/05/16 00:56
前段项目中有一个比较变态的需求，之所以变态，是因为我们的产品展示方案基于维护和安全考虑做的比较复杂。
大体流程时，我们想要实现通过外站引入一个脚本后，输出我们的产品内容到对方站上。 所以我们的脚本是用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" onmouseover="this.src ='http://p0.qhimg.com/d/di/logo_0709.png'" onmouseout="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].onmouseover=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> 0 0
- iframe之嵌套方案总结
- html之iframe使用总结
- 解决iframe嵌套微信公众号文章图片不显示的方案
- iframe嵌套用法
- 查找所有嵌套iframe
- Iframe指定位置嵌套
- iframe防止嵌套
- selenium 嵌套iframe
- iframe网页嵌套效果
- 嵌套 iframe 取值
- div中嵌套iframe
- Iframe 嵌套网站
- iframe嵌套跳转页面
- 页面嵌套iframe
- 替代废除iframe方案
- 跨iframe通信方案
- iframe嵌套的网页大小适应iframe
- iframe总结
- WordPress插件 UberGrid 高级相册图片分享中文插件[更新至v2.0.13]
- 2016年01月06日,07日,08日公司项目开发记录
- op03-export man pages
- FormatDataLibsvm.xls对数据的转换
- Cookie 和 Session机制详解
- iframe之嵌套方案总结
- 欢迎使用CSDN-markdown编辑器
- [已经解决]想实现限制192.168.43.1~192.168.43.255对公网的访问，请问谁用iptables或者route 能实现？
- Ofbiz之皮肤主题开发定制
- 返回数据给上一个活动
- redis集群搭建
- hadoop 2.6.0 LightWeightGSet源代码分析
- leetcode笔记：Integer to English Words
- 对HDFS上多个文件并行执行grep操作
