兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

iframe是什么?iframe用法详解!

[复制链接]
tuyuanma 发表于 2017-4-6 10:42:39 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


    经常和网站打交道或者经常建站的朋友对iframe肯定不陌生,网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说,iframe并不熟悉,那么iframe到底是什么?iframe用法有哪些呢?
. \: M; \" p: @% |- }* l+ D+ Z6 ~- }8 s  [
    1-1F31220532c23.jpg
" [. `1 B5 ]2 [8 }+ P" N3 @4 n, e! ]1 ^  J* ^
    iframe是什么$ m; ~, D: v- Z7 `0 F, T* h" ]" {9 W* k
, Z1 ^6 H2 r% D0 X' [2 J# k
    iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。
" O( m, M' v0 B3 _6 K. Q5 E! M1 ?+ B7 Q; d( _, Q9 \* n: t$ s$ A
    iframe用法详解0 c+ ?, `4 {/ X2 @) m) J

1 ]5 ?) S5 G' T    首先需要了解iframe标签的写法,和大多HTML标签写法相同,iframe标签输入形式为:<iframe>和</iframe>。以<iframe>开头,以</iframe>结尾,将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。  k1 C5 i& r7 M0 ^

( |& @9 v; I, m9 {; u! e    iframe标签的属性
4 ^- V# U0 |' Z; d0 r6 [1 L/ B* d: h" m6 z! w4 Z" u
    align:left、right、top、middle、bottom。用于规定如何根据周围的元素来对齐此框架。不赞成使用。请使用样式代替。- ?& M* C) Y2 J
; ?7 u; y5 @1 B
    frameborder:1、0。用于规定是否显示框架周围的边框。7 Y, s% D$ k( u5 b1 }/ _; j

6 V% `* Z+ Y' ~' }2 [/ Y+ c. {( L/ z% Y    height:pixels、%。用于规定iframe的高度。
, [& R% v+ L$ s) ~$ A, C; ~9 V0 n9 h7 b. S
    longdesc:URL。规定一个页面,该页面包含了有关iframe的较长描述。3 _& ?/ ]( m( s$ }2 J& n, X4 x

/ r; p# G, T" I6 o& s$ ~* t3 u    marginheight:pixels。定义iframe的顶部和底部的边距。
% ]/ R3 m/ x  t( z7 e& ~- Q+ @! m/ u& f' e
    marginwidth:pixels。定义iframe的左侧和右侧的边距。
9 l: i* ^9 X) Q/ w: p. }% x$ n& T3 {' }0 L8 D6 E
    name:frame_name。规定iframe的名称。8 D: ^) ~, S$ w1 P& g. Q( R) O) r$ M9 E; ~

" O) S  m+ s& O; N5 m4 a    scrolling:yes、no、auto。规定是否在iframe中显示滚动条。. k( J/ E, X6 W$ e& E

# }- _3 b* ~1 v5 c7 E, F% S0 U5 @: p    src:URL。规定在iframe中显示的文档的URL。* D6 k- A* _& L! `5 m. \

# d; x5 `1 ^( i6 |- D    width:pixels。%。定义iframe的宽度。7 H% ^# ~3 y8 i4 I; T
0 y1 I( G: l2 I) ^9 Z* W# j- w2 u) B
    iframe用法案例
# F7 P1 }7 ~4 L/ |% d( P- O' a+ i! z. l. z
    例子1, O# Y& {1 A  G" c6 c; o1 ?

3 A4 |9 I; H4 F. W9 E    <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>2 I/ k' v$ u4 u$ k8 B) y$ P
, y. E6 Y  w! ~% d, q
    width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条(可选的参数为 auto、yes、no,如果省略这个参数,则默认为auto);frameborder  边框大小;+ c( M1 R* w4 ?9 x5 B; Y) `
  ]3 _; n% T. \& @2 |. n2 N' S, \
    注意:URL建议用绝对路径* W1 W1 M, p7 N, o7 k
9 Y. T9 ?3 k7 N' x% B
    传说中百度用:<iframe width=0 height=0 frameborder=0 scrolling=auto src=www.zzidc.com></iframe>
2 _  J: a; i# Y! N8 C
! F0 ?2 H4 |, u' Y& R    例子23 z& u1 q9 `) s7 Y: I& i9 |4 f8 p
3 r4 T: y: i4 N, H7 t# h& @' E& X
    如果一个页面里面有框架。随便点页面里的连接,要求在这个<iframe> 里打开。在iframe 中加入name=** (**自己设定)% Z$ {" T# e) f# Y9 }5 l( d

8 w7 j, f& ~" c+ X# ^0 H    <iframe name=**  ></iframe>
. _9 H% A9 i! R
$ I5 R$ Z3 H' k5 N  k; s    然后在修改默认打开模式,:网页HEAD中加上<a href=URL target=**>或部分连接的目标框架设为(**)
  R" A: n; J% @0 Q* O3 C
7 }: @% J% M7 R+ N& s, ~, l- b    例子3
( }3 J2 G6 w, {& j2 x3 I) B
% \8 c% G7 b& ^    要插入一个页面。要求只拿中间一部分。其他的都不要。' b+ k* i  W" r" H
2 C0 J  ^3 ]! U0 q8 g
    代码如下:
+ P/ K" q8 f7 {5 z" @
4 q# z9 \; B2 F& ]7 o3 J    <iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170 hspace=0 src="http://host.zzidc.com/"  frameborder=no scrolling=no  width=776  height=2500></iframe>
1 V2 k" J  j) w7 @8 g4 @" B- v/ P, w' n/ N# B
    控制插入页被框架覆盖的深度 marginwidth=0 marginheight=0;控制框架覆盖上部分的深度 vspace=-170
0 n! F4 L( T4 Q$ P
! [+ p& d( l, U( n    scrolling滚动条要否(auto、yes、no)   frameborder框架的边框大小,width=776  height=2500此框架的大小。# E1 h# y) ?* X8 }2 c/ _
5 E6 v2 b4 ]4 f3 R; H. V3 u, u2 ]
    一、页面内加入iframe
. K- V1 X. f* [$ z8 c4 _2 p# G; ~# C& v3 a' }7 \4 e
    <iframe width=420 height=330 frameborder=0 scrolling=auto src=URL></iframe>,
% s: x6 t2 |% h; M: n7 W, X# i0 u' |2 d- I  G
    scrolling表示是否显示页面滚动条,可选的参数为auto、yes、no,如果省略这个参数,则默认为auto。) Q1 f$ `, i4 }( B+ T
# e3 \0 Z! Y5 `( r4 f; W) U5 J
    二、超链接指向这个嵌入的网页,只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://host.zzidc.com></iframe>,然后,网页上的超链   接语句应该写为:<a  href=URL target=aa>
0 w  h, A2 R' I  X: \/ g( e( |7 W7 u7 a: @4 P! L
    三、如果把frameborder设为1,效果就像文本框一样6 A6 u6 t( C7 G* i: b% R0 C, A
: ?% Z  U, N( @- Q9 C" h' W3 r9 C' r6 {
    透明的iframe的用法
" w4 X& l/ Z3 [. c- |" Y) Q& z
    必需IE5.5以上版本才支持$ c# f( `- {5 z" {7 ^
: R* u3 S" Y( Y5 M
    在transparentBody.htm文件的<body>标签中,我已经加入了style="background-color=transparent" 通过以下四种iframe的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:- D6 n! A3 E( }! \5 x  O1 I
: l1 x/ r3 N& Z: s: B  X- x
    <iframe ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></iframe>; ?8 B% `$ x% L& c+ G5 {) ^: h( G

9 x6 K) ?8 M/ V    <iframe ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </iframe>8 F. x0 x& c7 H

8 f$ O1 u! d+ s& j7 O0 Z    <iframe ID="Frame3" SRC="transparentBody.htm"></iframe>+ \& E& ?: R7 I) ~( Q5 d6 H9 I

5 z& m8 n* ~; U5 k4 N4 t    <iframe ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </iframe>8 F" \4 n" S- c/ x( Q0 V! N

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2019-11-14 21:26
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表