通过iframe引用其他页面-如设计好的广告栏

最新推荐文章于 2024-04-23 19:29:15 发布

weixin_30555125

最新推荐文章于 2024-04-23 19:29:15 发布

阅读量158

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/lonelystarxing/articles/1884567.html

版权

最近在修改网站的前台，希望能够将广告栏设计为一个页面，然后直接调用过来，在以后的广告切换中，能够快速修改，避免很多不必要的麻烦。

对比下来，个人选择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 " >& 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 
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 >

解释：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都不会生效。

转载于:https://www.cnblogs.com/lonelystarxing/articles/1884567.html

weixin_30555125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过iframe引用其他页面-如设计好的广告栏

最近在修改网站的前台，希望能够将广告栏设计为一个页面，然后直接调用过来，在以后的广告切换中，能够快速修改，避免很多不必要的麻烦。对比下来，个人选择Html的iframe。以下是iframe调用页面的代码，加了点css样式，特简单的。代码 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...
复制链接

扫一扫