iframe实例_iframe例子资源-CSDN文库

共39个文件

png：25个

html：11个

css：1个

5星 · 超过95%的资源需积分: 32 161 浏览量 2012-10-11 20:49:23 上传评论 1 收藏 1.22MB RAR 举报

在HTML中，`<iframe>`元素是一个非常重要的组成部分，它允许我们在一个网页中嵌入另一个网页或者任何可渲染的内容，如视频、地图、文档等。`iframe`全称为"inline frame"，即内联框架，它创建了一个独立的浏览上下文，相当于在当前页面内部打开了一个新的窗口。本实例将通过两个具体的例子来深入解析`iframe`的使用方法。 **例子一：嵌入外部网页** 在第一个例子中，我们将会看到如何使用`iframe`来嵌入一个外部网站。`src`属性是`iframe`的关键，它指定要加载的网页URL。下面是一个基本的`iframe`代码示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>iframe实例 - 示例1</title> </head> <body> <h1>嵌入外部网页</h1> <p>请看下方的iframe，我们将嵌入Google首页：</p> <iframe src="https://www.google.com" width="600" height="400"></iframe> </body> </html> ``` 在这个例子中，`iframe`的宽度设为600像素，高度设为400像素，确保了嵌入内容的可见性。`iframe`中的`src`属性指定了要嵌入的网页URL（这里是Google首页）。 **例子二：本地文件的嵌入** 第二个例子展示如何使用`iframe`来显示本地的HTML文件。这在需要在网页上预览或测试本地文件时非常有用。假设我们有一个名为`local.html`的本地HTML文件，我们可以这样写`iframe`： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>iframe实例 - 示例2</title> </head> <body> <h1>嵌入本地文件</h1> <p>现在我们将加载本地的'local.html'文件：</p> <iframe src="local.html" width="600" height="400"></iframe> </body> </html> ``` 在这个例子中，`src`属性的值改为`local.html`，表示我们要加载的是与当前HTML文件位于同一目录下的本地文件。 **其他`iframe`属性和注意事项** - `sandbox`属性：用于设置`iframe`的安全策略，限制其可以执行的功能，例如禁用JavaScript、禁止自动播放媒体等。 - `name`属性：为`iframe`提供一个名称，以便通过`window.frames`对象访问或通过`form`的`target`属性进行提交。 - `allowfullscreen`属性：允许`iframe`内容全屏显示。 - `srcdoc`属性：可以替代`src`属性，直接在`iframe`中定义HTML内容，而不是指向外部URL。 - `iframe`内容的加载可能受到同源策略的限制，即`iframe`加载的页面必须与包含它的页面有相同的协议、域名和端口，除非服务器明确允许跨域访问。总结来说，`iframe`是HTML中一个强大的工具，它能够帮助我们实现网页的嵌入、预览、组合等多种功能。通过这两个实例，你应该对`iframe`的基本使用有了清晰的理解，但在实际应用中，还需要根据具体需求灵活运用并考虑安全性问题。

资源推荐

资源详情

资源评论

收起资源包目录

Iframe实例.rar （39个子文件）

Iframe实例

图书详细信息管理.html 352B

image

61476_top.jpg 49KB

图书分类管理.html 340B

back_index.html 2KB

用户评论管理.html 340B

订单管理.html 328B

用户信息管理.html 340B

资源下载11

ziyuanxiazai.html 4KB

image

pic3.png 3KB

xiazai.png 16KB

footer.png 46KB

richang.png 15KB

pic8.png 3KB

jiaoxue.png 16KB

pic7.png 3KB

zz.png 479KB

pic6.png 3KB

111.png 420B

pic1.png 3KB

zhuanye.png 15KB

daohang.png 3KB

pic10.png 3KB

banner1.png 89KB

pic11.png 215B

sousuo.png 941B

pic5.png 3KB

xinxi1.png 3KB

daohang1.png 193B

beijing.png 478KB

pic9.png 3KB

pic2.png 3KB

ziyuan.png 2KB

pic4.png 3KB

pic.gif 125B

jiaoxue.html 334B

rich.html 339B

zhuanye.html 333B

css.css 5KB

ziyuanzhongxin.html 5KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link type="text/css" rel="stylesheet" href="css.css" /> </head> <body> <div id="center">  <div id="head"> <img src="image/banner1.png" alt="" /> </div>  <div id="main"> <div class="main_left_daohang"> <p style="font-size:13px;">当前位置：<a href="#">学院首页</a>><a href="#">资源下载</a>>软件下载</p> </div> <div class="main_left_resource"> <div class="main_left_resource_type"> <ul> <li><a href="jiaoxue.html" target="text_center">教学办公软件 </a></li> <li><a href="zhuanye.html" target="text_center">专业课程软件</a></li> <li><a href="rich.html" target="text_center">日常应用软件</a></li> </ul> </div> <div class="main_left_resource_zhanshi"> <iframe name="text_center" scrolling ="no" width="100%" heaght="100%" frameborder="0" src="#.html"> </iframe> </div> </div> <div class="main_right_sousuo"> <input type="text" name="sousuo" value="" id="main_right_input"/><a href="#"><img src="image/sousuo.png" alt="" align="absmiddle" /></a> </div> <div class="main_right"> <p style=" padding-left:3px;font-weight:bold;font-size:14px;padding-top:6px;color:#333333;">最新添加</p> <ul class="right_tianjia_ul"> <li><a href="#">Internet Explorer 8 for</a></li> <li><a href="#">傲游浏览器(Maxthon) 3.1</a></li> <li><a href="#">迅雷(Thunder) 7.2.6.342</a></li> <li><a href="#">PP点点通 2008 12.16 正式</a></li> <li><a href="#">Macromedia Dreamweaver </a></li> <li><a href="#">Macromedia Dreamweaver </a></li> <li><a href="#">Macromedia Dreamweaver </a></li> <li><a href="#">Macromedia Dreamweaver </a></li> <li><a href="#">Macromedia Dreamweaver </a></li> </ul> </div> <div class="main_right2"> <p style=" padding-left:3px;font-weight:bold; font-size:14px;padding-top:6px;color:#333333;">下载排行榜</p> <ul class="right_paihang_ul"> <li class="right_paihang_ul_li1"><img src="image/pic1.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Internet Explorer 8 for</a></li> <li class="right_paihang_ul_li1"><img src="image/pic2.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">傲游浏览器(Maxthon) 3.1</a></li> <li class="right_paihang_ul_li1"><img src="image/pic3.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">迅雷(Thunder) 7.2.6.342</a></li> <li class="right_paihang_ul_li1"><img src="image/pic4.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">PP点点通 2008 12.16 正式</a></li> <li class="right_paihang_ul_li1"><img src="image/pic5.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> <li class="right_paihang_ul_li1"><img src="image/pic6.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> <li class="right_paihang_ul_li1"><img src="image/pic7.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> <li class="right_paihang_ul_li1"><img src="image/pic8.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> <li class="right_paihang_ul_li1"><img src="image/pic9.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> <li class="right_paihang_ul_li1"><img src="image/pic10.png" alt="" /></li><li class="right_paihang_ul_li2"><a href="#">Macromedia Dreamweaver </a></li> </ul> </div> </div>  <div id="footer"> <div id="footer_nav"> <ul> <li><a href="#">师资队伍</a>|</li> <li><a href="#">数字校园</a>|</li> <li><a href="#">班级主页</a>|</li> <li><a href="#">作品展示</a>|</li> <li><a href="#">下载中心</a></li> </ul> </div> <br /> <br /> <br /> <span>All Rights Reserved Copyright (C) 2007-2011 河南大学软件学院</span> <br /> <br /> <span>电话：0371-65666428 65666428（传真)</span> </div> </div> </body> </html>

评论收藏

内容反馈