當前位置:首頁 > 建站常識 > 列表

iframe調用(yòng)指定網頁的(de)特定位置

點擊:時(shí)間:2018/6/20關鍵詞:上海網站制作 上海網頁設計
有些時(shí)候我們并不需要顯示iframe标簽屬性src指定的(de)目标網頁的(de)所有内容,往往隻需要顯示某一特定區(qū)域。現有兩種實現方法提供,但嚴禁使用(yòng)此方法用(yòng)于欺騙、隐瞞目的(de)。這(zhè)裏用(yòng)到了(le)Iframe的(de)一些屬性,稍微介紹下(xià):1. marginheight 屬性規定框架内容與

<a href=/tags/shanghaiwangyesheji/><strong>上海網頁設計</strong></a>

有些時(shí)候我們并不需要顯示iframe标簽屬性src指定的(de)目标網頁的(de)所有内容,往往隻需要顯示某一特定區(qū)域。現有兩種實現方法提供,但嚴禁使用(yòng)此方法用(yòng)于欺騙、隐瞞目的(de)。

這(zhè)裏用(yòng)到了(le)Iframe的(de)一些屬性,稍微介紹下(xià):

1. marginheight 屬性規定框架内容與框架的(de)上方和(hé)下(xià)方之間的(de)高(gāo)度,以像素計。

2. maiginweidth 屬性規定框架内容與框架的(de)左側和(hé)右側之間的(de)高(gāo)度,以像素計。

3. vspace y方向顯示的(de)區(qū)域,負值爲從目标網頁最上面開始截取的(de)部分(fēn),正值爲y值+從上部開始内容區(qū)域

4. hsapce x方向顯示的(de)區(qū)域,負值爲從目标網頁左側開始截圖的(de)部分(fēn),正值爲x值+從左側開始内如區(qū)域

5. src 目标網頁的(de)地址,可(kě)以爲html,asp,文本等内如

6. frameborder 框架邊框,0爲無邊框(畫(huà)中畫(huà)效果)

7. scrolling 是否顯示滾動,yes顯示

8. align:指定浮動窗(chuāng)口内的(de)頁面相對(duì)于浮動窗(chuāng)口的(de)位置,它的(de)值有left、right、top、middle、bottom

9. marginwidth、marginheight 目标網頁被框架覆蓋的(de)深度

方法一,以百度主頁http://www.baidu.com爲例,去掉百度的(de)Logo部分(fēn),代碼與效果如下(xià):

< iframe width="800" height="600" src="http://www.baidu.com" scrolling="no" hspace="-100" vspace="-150"></iframe>

方法二,使用(yòng)DIV控制,這(zhè)也(yě)是使用(yòng)iframe框架的(de)好處,因爲它不像frame,它可(kě)以顯示的(de)網頁的(de)任意區(qū)域代碼如下(xià):

< div align="center" style="margin:0 auto;">

<div style="width:800px;height:600px;overflow:hidden;border:0px">

 <div style="width:500px;height:800px;margin:-153px 0px 0px -10px;">

  <iFrame src="http://www.baidu.com" width="800" height="600" scrolling="no"></iFrame>

 </div>

</div>

< /div>

方法三、

目前尚未找到按坐(zuò)标來(lái)控制的(de)辦法,隻有采用(yòng)按頂、左、右邊跑的(de)方法來(lái)控制,因此要制作一個(gè)文件來(lái)完全調用(yòng)目标網頁内容,然後再在需要調用(yòng)指定内容的(de)地方使用(yòng)iframe代碼調用(yòng)。

首先建立一個(gè)完全調用(yòng)目标網頁的(de)文件,命名爲files.html,代碼如下(xià):

< body> <iframe src=”目标網址” width=”980″ height=”700″ frameborder=”0″ scrolling=”no” style=”position: absolute; top: -120px; left: -680px;”></iframe>

這(zhè)個(gè)頁面用(yòng)iframe框架引用(yòng)了(le)目标頁面,并且用(yòng)CSS定位設定了(le)框架浮動位置(top: -120px; left: -680px)。當然也(yě)可(kě)以按右邊距控制,如right:680px,距離大(dà)小可(kě)以根據情況調整,直到調整到合适的(de)位置。

然後在需要調用(yòng)目标内容的(de)文件中合适的(de)位置放入以下(xià)代碼:

<iframe src=”這(zhè)裏填寫上面保存的(de)html文檔的(de)地址” width=”300″ height=”230″ frameborder=”0″ scrolling=”no”></iframe>

高(gāo)寬可(kě)以根據情況調整,爲了(le)使調用(yòng)的(de)内容正常、正确顯示的(de)我們設定的(de)位置,大(dà)家可(kě)以修改files.html裏的(de)邊距控制量以達到最佳效果。

遇到問題:JSP中iframe表中加上 vspace=-190 hspace=0 這(zhè)兩個(gè)屬性報Undefined attribute name (vspace)錯誤.而且這(zhè)兩個(gè)标簽也(yě)不管用(yòng)

首先提供一個(gè)需要現在位置大(dà)小的(de)一個(gè)div 然後 在這(zhè)個(gè)div 中引入要加載的(de)頁面并指定具體要查看内容的(de)位置,下(xià)面提供了(le)一個(gè)示例便你參考,如不理(lǐ)解可(kě)以追問我。

<div class="groupnews_insideL" style="width:800px;margin-left:10px; overflow:hidden;position:relative;">

<iframe id="jin10" width="125%" height="5000" frameborder="0" style="position:relative; top:-175px; float:left; left:-193px;" scrolling="no" src="http://www.kuaixun360.com/data/2.html" name="jin10">

預約建站
免費提供網站優化(huà)
領取關鍵詞