当前位置: 开发笔记 > 编程语言 > 正文

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

作者：xiaoge | 来源：互联网 | 2023-09-08 13:33

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

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

对比下来&＃xff0c;个人选择Html的iframe。

以下是iframe调用页面的代码&＃xff0c;加了点css样式&＃xff0c;特简单的。

代码

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns&＃61;"http://www.w3.org/1999/xhtml">
3 <head>
4 <title>sub pagestitle>
5 head>
6 <body>
7 <div class&＃61;&＃39;span-12 last&＃39;>
8 <div class&＃61;&＃39;tiny_ads&＃39;>div>
9 <div class&＃61;&＃39;tiny_ads&＃39;>div>
10 <div class&＃61;&＃39;tiny_ads&＃39;>div>
11 <div class&＃61;&＃39;tiny_ads&＃39;>div>
12 <div class&＃61;&＃39;tiny_ads&＃39;>div>
13 <div class&＃61;&＃39;tiny_ads&＃39;>div>
14 div>
15 body>
16 html>
17 <style type&＃61;"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&＃61;"http://www.w3.org/1999/xhtml" xml:lang&＃61;"en" lang&＃61;"en">
4 <head>
5 <meta http-equiv&＃61;"content-type" content&＃61;"text/html;charset&＃61;UTF-8" />
6 <title><%&＃61; yield :title %>title>
7
8 <%&＃61; stylesheet_link_tag &＃39;/stylesheets/screen.css&＃39;,&＃39;/stylesheets/ie.css&＃39;,&＃39;/stylesheets/style.css&＃39; %>
9 <%&＃61; Javascript_include_tag &＃39;jquery&＃39; ,&＃39;report&＃39;%>
10 head>
11 <body>
12 <div id&＃61;&＃39;wrapper&＃39;>
13 <div class&＃61;"span-24 last">
14 
15 <div class&＃61;"span-2"> div>
16 <div class&＃61;"span-20">
17 <div class&＃61;"span-20 last" id&＃61;"logo">
18 <div class&＃61;&＃39;span-8&＃39;>

19 <%#*<div class&＃61;&＃39;span-12 last&＃39;>%>
20 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
21 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
22 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
23 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
24 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
25 <%#*<div class&＃61;&＃39;tiny_ads&＃39;>

%>
26 <%#*div>%>
27 <iframe frameborder&＃61;"0" scrolling&＃61;"no" marginwidth&＃61;"0" marginheight&＃61;"0" src&＃61;"iframe/iframe.html" align&＃61;"center" style&＃61;"width: 470px;height: 110px;">iframe>
28 div>
29
30
31 <div class&＃61;"span-20 last" id&＃61;"search">
32 <div class&＃61;"span-10">
33 <div id&＃61;"menu">
34 <ul>
35 <li><%&＃61;link_to "首页" ,&＃39;/&＃39;%>
36 <li><%&＃61;link_to "最热新闻" ,&＃39;/hottest&＃39;%>
37 <li><%&＃61;link_to "最新新闻" ,&＃39;/latest&＃39;%>
38 ul>
39 div>
40 div>
41 <div class&＃61;"span-6 last" style&＃61;"float:right;width:auto;">
42 <form action&＃61;"/articles">
43 <input name&＃61;"search" style&＃61;"margin:0px; " id&＃61;"search " size&＃61;"18">input>
44 <input type&＃61;"submit" style&＃61;"margin:0px; " value&＃61;"查找">input>
45 form>
46 div>
47 div>
48 
49 
50 <%&＃61;yield%>
51 div>
52 div>
53 div>
54 body>
55 html>

解释&＃xff1a;width插入页的宽&＃xff1b;height插入页的高&＃xff1b;scrolling 是否显示页面滚动条&＃xff1b;frameborder 边框大小&＃xff1b;src即需要调用的界面。前面是在页面内加入iframe&＃xff0c;此外还有种常见方法。

　　只要给这个iframe命名就可以了。方法是&＃xff0c;然后&＃xff0c;网页上的超链接语句应该写为&＃xff1a;

注&＃xff1a;如果把frameborder设为1&＃xff0c;效果就像文本框一样。

1&＃xff0c;粗心。这也是很多程序员共同的小毛病。认真写作代码&＃xff0c;对照前后&＃xff0c;不要找不到自己要调用的东西。我刚犯了一个这样的错误&＃xff0c;蛋疼&＃xff01;

2&＃xff0c;你调用的页面效果显示不出来。这可能跟自己设置的大小宽度有关&＃xff0c;如果大小宽度太小或者太大都容易将调用的页面内容隐藏掉&＃xff0c;事实上它已经在你的页面上&＃xff0c;只是你看不到而已&＃xff0c;这可以根据你的页面源码判断。

3&＃xff0c;还有个问题就是在于你所要调用iframe的页面本身也是两一个html页面的子页面&＃xff0c;它只是主页面的一个部分内容。此时你可能会遇到找不到iframe方法&＃xff0c;要是不能全局考虑的话&＃xff0c;会让你很是纠结。因为你必须得确保你的页面中含有

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">此类代码&＃xff0c;其意义在于建立符合标准的网页&＃xff0c;此类声明是必不可少的&＃xff0c;除非你的XHTML确定了一个正确的DOCTYPE&＃xff0c;否则你的标识和CSS都不会生效。