超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面_第1頁(yè)
超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面_第2頁(yè)
超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面_第3頁(yè)
超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面_第4頁(yè)
超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面_第5頁(yè)
已閱讀5頁(yè)，還剩5頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HL超簡(jiǎn)單的跨域iframe高度自適應(yīng)的頁(yè)面一從金山導(dǎo)航接入歷史上的今天內(nèi)容說(shuō)起HL大家學(xué)習(xí)一下技術(shù)吧!我找了很久，這個(gè)算不錯(cuò)的了。在實(shí)際的項(xiàng)目進(jìn)行中，很多地方可能由于歷史原因不得不去使用iframe,包括目前正火熱的應(yīng)用開(kāi)發(fā)也是如此。隨之而來(lái)的就是在實(shí)際使用iframe中，會(huì)遇到iframe高度的問(wèn)題，由于被嵌套的頁(yè)面長(zhǎng)度不固定而顯示出來(lái)的滾動(dòng)條，不僅影響美觀，還會(huì)對(duì)用戶(hù)操作帶來(lái)不便。于是自動(dòng)調(diào)整iframe的高度就成為本文的重點(diǎn)。采用JavaScript來(lái)控制iframe元素的高度是iframe高度自適應(yīng)的關(guān)鍵，同時(shí)由于JavaScript對(duì)不同域名下權(quán)限的控制，引發(fā)出同域、跨域兩種情況。1.期待中發(fā)現(xiàn)>_^ =——養(yǎng)生保健|黃歷查詢(xún)四種女人在換上可能變野獸健康I謹(jǐn)憤痰多危害身體健康女人I乳房袈然變?nèi)枞橄侔㊣母嬰|孕婦生男生女的特征！知識(shí)|家用地暖對(duì)人體是否有害!情感|從女人睡姿可看穿感情現(xiàn)狀兩性|男歐女愛(ài)到底誰(shuí)消適了誰(shuí)男人|畀人都會(huì)有的兩個(gè)出軌高發(fā)期女人|男女間晏期待的那些事兒2014年12月，通過(guò)cnzz統(tǒng)計(jì)注意到幾個(gè)特殊的來(lái)路(/tiyan.html)tiyan體驗(yàn)版，個(gè)人判斷是內(nèi)部測(cè)試版本，過(guò)段時(shí)間就會(huì)上線的，那么我的“歷史上的今天”又和上首頁(yè)啦，11月剛上“中國(guó)搜索”首頁(yè)！這可是又一次驚喜了！10日，金山導(dǎo)航的BD鄭皓月聯(lián)系上了我，說(shuō)：“我們二級(jí)頁(yè)想接入你們歷史上的今天的內(nèi)容~”。

我問(wèn)：具體我們要怎樣和貴方換量呢？我們之前和合作過(guò)這種形式鄭回：你和hao123當(dāng)時(shí)的是按照什么比例換滴我答：/lishi/底部有個(gè)“歷史上的今天”，當(dāng)時(shí)是沒(méi)有換的，是他們免費(fèi)給我做的,打入，接hao123通知，沒(méi)辦法被換了。只留在頂部給我們保留個(gè)鏈接?？偨Y(jié)：專(zhuān)業(yè)不如商業(yè)一一這是鐵的事實(shí)2?印證：天上掉下的林妹妹，沒(méi)見(jiàn)了!接下來(lái)，我們討論如何換量，兩個(gè)不對(duì)稱(chēng)的網(wǎng)站如何換量呢？但后來(lái)軍事類(lèi)top81(我們給你們1w你們鄭說(shuō)：“每天有1w的流量，希望能你們也給我們一些位置，給我們導(dǎo)入流量，2:1但后來(lái)軍事類(lèi)top81(我們給你們1w你們我說(shuō)：“這個(gè)量估計(jì)無(wú)法達(dá)到，原因是：有些用戶(hù)是通過(guò)郵箱訂閱（QQ郵箱5萬(wàn)訂閱，139郵箱也近5萬(wàn)，網(wǎng)易云閱讀5萬(wàn)多）以及網(wǎng)絡(luò)媒體編輯的轉(zhuǎn)載，實(shí)際來(lái)到我們網(wǎng)站的流量已經(jīng)很少了。我們還采用以綠色公益等方式保持界面清晰來(lái)，這樣網(wǎng)站廣告位就更少”最后，皓月跟產(chǎn)品經(jīng)理溝通下這下情況，同意了不換量的合作，只在首頁(yè)做個(gè)不能保證流量多少?gòu)V告條展示品牌。而他們能夠在二級(jí)目錄通過(guò)iframe直接調(diào)用到我們的內(nèi)容。皓月把我拉入QQ討論群，用了幾天時(shí)間相互協(xié)作完成了iframe頁(yè)面，在此佩服一下金山的幾名員工，下午直到晚上，中間沒(méi)有休息吃飯的在QQ談?wù)撊褐辛墓ぷ鳌?014-12-1116:45:15最近是不是在做個(gè)體驗(yàn)版對(duì)嗎？⑨dulja.ucun/tiyan.htud面■事情我還真不知道哎你在哪里找的入口在統(tǒng)計(jì)中看到的。貴方在體騎版中把我的站加入到首頁(yè)中。我頁(yè)的要謝謝您們的。但這幾天好像刪除了。幾天后毒霸導(dǎo)流量大過(guò)后怎么會(huì)回落呢?2014-12-1116:45:15最近是不是在做個(gè)體驗(yàn)版對(duì)嗎？⑨dulja.ucun/tiyan.htud面■事情我還真不知道哎你在哪里找的入口在統(tǒng)計(jì)中看到的。貴方在體騎版中把我的站加入到首頁(yè)中。我頁(yè)的要謝謝您們的。但這幾天好像刪除了。幾天后毒霸導(dǎo)流量大過(guò)后怎么會(huì)回落呢?原因很簡(jiǎn)單，duba已經(jīng)把首頁(yè)“歷史上的今天"鏈接改為/lssdjt.html了。又喜又悲，網(wǎng)站幾何?3?iframe高度自適應(yīng)的頁(yè)通過(guò)這次交流，感受到“金山精神”值得肯定，雖然不能獲得更多的流量，但也是一次品牌宣傳，讓更多的用戶(hù)了解我們,一個(gè)堅(jiān)持了十年多的老站長(zhǎng)，專(zhuān)注于“歷史”與“今天”，“鏡子”與“現(xiàn)實(shí)”的融合。同時(shí)技術(shù)也得到提升，如跨域iframe高度自適應(yīng)的頁(yè)面問(wèn)題，一開(kāi)始，我們提供的頁(yè)面是同域自適應(yīng)高度，代碼如下：/*同域可以使用，但跨域就不能用了。*/functionIFrameResize(){//alert(this.document.body.scrollHeight);//單出當(dāng)前頁(yè)面的高度varobj=parent.document.getElementById("duba_lssdjt_frame");//取得父頁(yè)面IFrame對(duì)象//alert(obj.height);/彈出父頁(yè)面中IFrame中設(shè)置的高度if(obj){obj.style.height=document.getElementById("list").offsetHeight+"px";/調(diào)整父頁(yè)面中IFrame的高度為此頁(yè)面的高度//alert(調(diào)節(jié)高度："+document.getElementById("list").offsetHeight);}}4.跨域iframe高度自適應(yīng)的頁(yè)面iframe跨域高度自適應(yīng)以前遇到過(guò)，但沒(méi)有弄成功，這次可以向duba技術(shù)們請(qǐng)教如何開(kāi)展了。首先xx發(fā)給我一個(gè)iframe高度自適應(yīng)的頁(yè)面.rar因?yàn)橛龅街芰?，大家都放假，我只好下載來(lái)晚上慢慢研究，結(jié)果就是弄不明白，因?yàn)檎{(diào)試過(guò)程需要雙方的配合，畢竟是“跨域”，所以“單獨(dú)”就老是弄不好，加上技術(shù)這方面有點(diǎn)呆的我。經(jīng)過(guò)幾天和金山導(dǎo)航的技術(shù)員耐心細(xì)語(yǔ)的交流，大概總結(jié)“跨域”高度自適應(yīng)的方法如下：一、A站要建立2個(gè)頁(yè)面：httP：///lssdjt.html，lssdjt.html頁(yè)面通過(guò)iframe調(diào)用B站數(shù)據(jù)源，代碼如下：<iframeid="duba_lssdjt_frame"src="/duba.htm"width="1000"height="1550"scrolling="no"frameborder="0"></iframe>在建立第2個(gè)頁(yè)面：/lssdjt/iframe_lssdjt_height.html，代碼如下：<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>iframe跨域高度自適應(yīng)</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個(gè)頁(yè)面：/duba.htm,duba.htm為數(shù)據(jù)源，高度自動(dòng)變化，頁(yè)面要引入jquery并在其底部插入js代碼，如下：/*跨域高度自適應(yīng)的頁(yè)面*/(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站頁(yè)面lssdjt.html通過(guò)iframe調(diào)用B站duba.htm時(shí)，當(dāng)頁(yè)面duba.htm高度發(fā)生變化時(shí)，頁(yè)面duba.htm通過(guò)自身的代碼向http:///lssdjt/iframe_lssdjt_height.html這個(gè)頁(yè)面發(fā)送高度參數(shù)，這時(shí)A站頁(yè)面iframe_lssdjt_height.html接收高度數(shù)值后，調(diào)整同域頁(yè)面lssdjt.html的高度，這樣就實(shí)現(xiàn)跨域高度自適應(yīng)了。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訪問(wèn)<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. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論