超简单的跨域iframe高度自适应的页面_第1页
超简单的跨域iframe高度自适应的页面_第2页
超简单的跨域iframe高度自适应的页面_第3页
超简单的跨域iframe高度自适应的页面_第4页
超简单的跨域iframe高度自适应的页面_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HL超简单的跨域iframe高度自适应的页面一从金山导航接入历史上的今天内容说起HL大家学习一下技术吧!我找了很久，这个算不错的了。在实际的项目进行中，很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此。随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便。于是自动调整iframe的高度就成为本文的重点。采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引发出同域、跨域两种情况。1.期待中发现>_^ =——养生保健|黄历查询四种女人在换上可能变野兽健康I谨憤痰多危害身体健康女人I乳房袈然变犬警惕乳腺癌I母婴|孕妇生男生女的特征！知识|家用地暖对人体是否有害!情感|从女人睡姿可看穿感情现状两性|男欧女爱到底谁消适了谁男人|畀人都会有的两个出轨高发期女人|男女间晏期待的那些事儿2014年12月，通过cnzz统计注意到几个特殊的来路(/tiyan.html)tiyan体验版，个人判断是内部测试版本，过段时间就会上线的，那么我的“历史上的今天”又和上首页啦，11月刚上“中国搜索”首页！这可是又一次惊喜了！10日，金山导航的BD郑皓月联系上了我，说：“我们二级页想接入你们历史上的今天的内容~”。

我问：具体我们要怎样和贵方换量呢？我们之前和合作过这种形式郑回：你和hao123当时的是按照什么比例换滴我答：/lishi/底部有个“历史上的今天”，当时是没有换的，是他们免费给我做的,打入，接hao123通知，没办法被换了。只留在顶部给我们保留个链接。总结：专业不如商业一一这是铁的事实2•印证：天上掉下的林妹妹，没见了!接下来，我们讨论如何换量，两个不对称的网站如何换量呢？但后来军事类top81(我们给你们1w你们郑说：“每天有1w的流量，希望能你们也给我们一些位置，给我们导入流量，2:1但后来军事类top81(我们给你们1w你们我说：“这个量估计无法达到，原因是：有些用户是通过邮箱订阅（QQ邮箱5万订阅，139邮箱也近5万，网易云阅读5万多）以及网络媒体编辑的转载，实际来到我们网站的流量已经很少了。我们还采用以绿色公益等方式保持界面清晰来，这样网站广告位就更少”最后，皓月跟产品经理沟通下这下情况，同意了不换量的合作，只在首页做个不能保证流量多少广告条展示品牌。而他们能够在二级目录通过iframe直接调用到我们的内容。皓月把我拉入QQ讨论群，用了几天时间相互协作完成了iframe页面，在此佩服一下金山的几名员工，下午直到晚上，中间没有休息吃饭的在QQ谈论群中聊工作。2014-12-1116:45:15最近是不是在做个体验版对吗？⑨dulja.ucun/tiyan.htud面■事情我还真不知道哎你在哪里找的入口在统计中看到的。贵方在体骑版中把我的站加入到首页中。我頁的要谢谢您们的。但这几天好像刪除了。几天后毒霸导流量大过后怎么会回落呢?2014-12-1116:45:15最近是不是在做个体验版对吗？⑨dulja.ucun/tiyan.htud面■事情我还真不知道哎你在哪里找的入口在统计中看到的。贵方在体骑版中把我的站加入到首页中。我頁的要谢谢您们的。但这几天好像刪除了。几天后毒霸导流量大过后怎么会回落呢?原因很简单，duba已经把首页“历史上的今天"链接改为/lssdjt.html了。又喜又悲，网站几何?3・iframe高度自适应的页通过这次交流，感受到“金山精神”值得肯定，虽然不能获得更多的流量，但也是一次品牌宣传，让更多的用户了解我们,一个坚持了十年多的老站长，专注于“历史”与“今天”，“镜子”与“现实”的融合。同时技术也得到提升，如跨域iframe高度自适应的页面问题，一开始，我们提供的页面是同域自适应高度，代码如下：/*同域可以使用，但跨域就不能用了。*/functionIFrameResize(){//alert(this.document.body.scrollHeight);//单出当前页面的高度varobj=parent.document.getElementById("duba_lssdjt_frame");//取得父页面IFrame对象//alert(obj.height);/弹出父页面中IFrame中设置的高度if(obj){obj.style.height=document.getElementById("list").offsetHeight+"px";/调整父页面中IFrame的高度为此页面的高度//alert(调节高度："+document.getElementById("list").offsetHeight);}}4.跨域iframe高度自适应的页面iframe跨域高度自适应以前遇到过，但没有弄成功，这次可以向duba技术们请教如何开展了。首先xx发给我一个iframe高度自适应的页面.rar因为遇到周六日，大家都放假，我只好下载来晚上慢慢研究，结果就是弄不明白，因为调试过程需要双方的配合，毕竟是“跨域”，所以“单独”就老是弄不好，加上技术这方面有点呆的我。经过几天和金山导航的技术员耐心细语的交流，大概总结“跨域”高度自适应的方法如下：一、A站要建立2个页面：httP：///lssdjt.html，lssdjt.html页面通过iframe调用B站数据源，代码如下：<iframeid="duba_lssdjt_frame"src="/duba.htm"width="1000"height="1550"scrolling="no"frameborder="0"></iframe>在建立第2个页面：/lssdjt/iframe_lssdjt_height.html，代码如下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>iframe跨域高度自适应</title><scripttype="text/javascript">try{//document.domain='';varstart=self.location.href.indexOf("#");varend=self.location.href.length;varheight=self.location.href.substring(start+1,end);height=parseInt(height)+10;if(height<680){height=680;}top.document.getElementById("duba_lssdjt_frame").style.height=height+"px";}catch(e){}</script></head><body></body></html>二、B站要建立1个页面：/duba.htm,duba.htm为数据源，高度自动变化，页面要引入jquery并在其底部插入js代码，如下：/*跨域高度自适应的页面*/(function($){$(function(){var$_box=$('.wrap');varmentHeight=$_box.outerHeight()+parseInt($_box.css('marginTop'))+parseInt($_box.css('marginBottom'));varframe=$('<iframesrc="/lssdjt/iframe_lssdjt_height.html?lishijintian#'+mentHeight+'"/>').css({display:'none'});$('body').append(frame);setInterval(function(){varbodyHeight=$_box.outerHeight()+parseInt($_box.css('marginTop'))+parseInt($_box.css('marginBottom'));if(bodyHeight==mentHeight){returnfalse;}mentHeight=bodyHeight;frame.remove();frame=$('<iframesrc="/lssdjt/iframe_lssdjt_height.html?lishijintian#'+mentHeight+'"/>').css({display:'none'})；$('body').append(frame);},500);});})(jQuery);三、原理：A站页面lssdjt.html通过iframe调用B站duba.htm时，当页面duba.htm高度发生变化时，页面duba.htm通过自身的代码向http:///lssdjt/iframe_lssdjt_height.html这个页面发送高度参数，这时A站页面iframe_lssdjt_height.html接收高度数值后，调整同域页面lssdjt.html的高度，这样就实现跨域高度自适应了。A站1./lssdjthtml<iframeid=,iduba_lssdjLframeHsrc=,,http://codeJssdjtcom/duba.htm<iframeid=,iduba_lssdjLframeHsrc=,,http://codeJssdjtcom/duba.htmRwidth-'WOO"height-11550Hscrolling=Hno"frameborder=MOn></iframe>2.http:〃/lssdjt/ifranw_lssdjt_height.html①A1访问<scripttype=tltext/javascriptHlry{IIdocumentdomain=,duba.col|i,;varstart=self,location.h「ef・in永xOf("#");varend=self.location.href.lenjth;varheight=self.location.href.sibstring(start+1,end);height=parselnt(height)+10;公if(height<680){height=680;}®top.documentgetElementByldCdubaJssdjt_framen)-style.height=}catch(e)0</script>height+wpxn;B站1.http://codeJ/duba.htmW<scripttype=,,text/javascriptn>(function($){$(function(){ ⑤var$_box=JC.wrap*); 9varmentHeiaht=$^box.outerHeight()+parselnt($-box.css(,marginTop,))+parselnt($_box.css(,marginBottoni,));varframe=^(^iframesrcmhttpW/www.dubaconi/^sdjt/ifranieJssdjtJieight.htniWIisfiijintian^+nientHeightFAJ.css&display:'none'});{fbod/j.appendjframe);setlnterval(function(){varbodyHeight=$^box.outerHeight()+parselnt($_box.css(,marginTop,))+parselnt($_box.css(,marginBottom,));if(bodyHeight==mentHeight){returnfalse;}mentHeight=bodyHeight;fr

人人文库> 全部分类> 行业资料 > 各类标准

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论