最近在修改网站的前台,希望能够将广告栏设计为一个页面,然后直接调用过来,在以后的广告切换中,能够快速修改,避免很多不必要的麻烦。
对比下来,个人选择Html的iframe。
以下是iframe调用页面的代码,加了点css样式,特简单的。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > sub pages </ title >
5 </ head >
6 < body >
7 < div class ='span-12 last' >
8 < div class ='tiny_ads' ></ div >
9 < div class ='tiny_ads' ></ div >
10 < div class ='tiny_ads' ></ div >
11 < div class ='tiny_ads' ></ div >
12 < div class ='tiny_ads' ></ div >
13 < div class ='tiny_ads' ></ div >
14 </ div >
15 </ body >
16 </ html >
17 < style type ="text/css" >
18 * {
19 font-family : 微软雅黑, 雅黑, 黑体, 宋体 ;
20 }
21 body {
22 text-align : center ;
23 }
24 .tiny_ads {
25 width : 64px ;
26 height : 64px ;
27 float : left ;
28 background : #F8F8F8 ;
29 margin-right : 4px ;
30 margin-top : 36px ;
31 border : 2px solid #EEE ;
32 }
33 .span-12 {
34 width : 470px ;
35 }
36 .last {
37 margin-right : 0 ;
38 }
39 </ style >
下面是需要调用iframe的页面代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
3 < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
4 < head >
5 < meta http-equiv ="content-type" content ="text/html;charset=UTF-8" />
6 < title > <% = yield :title %> </ title >
7
8 <% = stylesheet_link_tag ' /stylesheets/screen.css','/stylesheets/ie.css','/stylesheets/style.css' %>
9 < % = javascript_include_tag ' jquery' ,'report'%>
10 </ head >
11 < body >
12 < div id = ' wrapper'>
13 < div class = " span-24 last " >
14 < ! -- 以下上方banner区块 -->
15 < div class = " span-2 " >& nbsp; </ div >
16 < div class = " span-20 " >
17 < div class = " span-20 last " id = " logo " >
18 < div class = ' span-8'> </div>
19 < %# *< div class = ' span-12 last'>%>
20 < %# *< div class = ' tiny_ads'></div>%>
21 < %# *< div class = ' tiny_ads'></div>%>
22 < %# *< div class = ' tiny_ads'></div>%>
23 < %# *< div class = ' tiny_ads'></div>%>
24 < %# *< div class = ' tiny_ads'></div>%>
25 < %# *< div class = ' tiny_ads'></div>%>
26 < %# *</ div > %>
27 < iframe frameborder ="0" scrolling ="no" marginwidth ="0" marginheight ="0" src ="iframe/iframe.html" align ="center" style ="width: 470px;height: 110px;" ></ iframe >
28 </ div >
29 <!-- end of 上方banner区块 -->
30 <!-- 以下搜索栏目 -->
31 < div class ="span-20 last" id ="search" >
32 < div class ="span-10" >
33 < div id ="menu" >
34 < ul >
35 < li > <% = link_to " 首页 " , ' /'%></li>
36 < li >< % = link_to " 最热新闻 " , ' /hottest'%></li>
37 < li >< % = link_to " 最新新闻 " , ' /latest'%></li>
38 </ ul >
39 </ div >
40 </ div >
41 < div class = " span-6 last " style = " float:right;width:auto; " >
42 < form action = " /articles " >
43 < input name = " search " style = " margin:0px; " id = " search " size = " 18 " ></ input >
44 < input type = " submit " style = " margin:0px; " value = " 查找 " ></ input >
45 </ form >
46 </ div >
47 </ div >
48 < ! -- end of 搜索栏目 -->
49 < ! -- 主体部分 -->
50 < % = yield %>
51 </ div >
52 </ div >
53 </ div >
54 </ body >
55 </ html >
<iframe frameborder="0" scrolling="no" marginwidth="0" marginheight="0" src="iframe/iframe.html" align="center" style="width: 470px;height: 110px;"></iframe>
解释:width插入页的宽;height插入页的高;scrolling 是否显示页面滚动条;frameborder 边框大小;src即需要调用的界面。前面是在页面内加入iframe,此外还有种常见方法。
超链接指向这个嵌入的网页:
只要给这个iframe命名就可以了。方法是<iframe name=**>,例如我命名为aa,写入这句HTML语言<iframe width=420 height=330 name=aa frameborder=0 src=http://www.XX.com></iframe>,然后,网页上的超链接语句应该写为:<a href=URL target=aa>
注:如果把frameborder设为1,效果就像文本框一样。
下面是使用iframe常见的错误:
1,粗心。这也是很多程序员共同的小毛病。认真写作代码,对照前后,不要找不到自己要调用的东西。我刚犯了一个这样的错误,蛋疼!
2,你调用的页面效果显示不出来。这可能跟自己设置的大小宽度有关,如果大小宽度太小或者太大都容易将调用的页面内容隐藏掉,事实上它已经在你的页面上,只是你看不到而已,这可以根据你的页面源码判断。
3,还有个问题就是在于你所要调用iframe的页面本身也是两一个html页面的子页面,它只是主页面的一个部分内容。此时你可能会遇到找不到iframe方法,要是不能全局考虑的话,会让你很是纠结。因为你必须得确保你的页面中含有
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">此类代码,其意义在于建立符合标准的网页,此类声明是必不可少的,除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。