通过iframe引用其他页面-如设计好的广告栏
最近在修改网站的前台，希望能够将广告栏设计为一个页面，然后直接调用过来，在以后的广告切换中，能够快速修改，避免很多不必要的麻烦。
对比下来，个人选择Html的iframe。
以下是iframe调用页面的代码，加了点css样式，特简单的。
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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的页面代码
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
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"> </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都不会生效。
