iframe使用很简单,使用src属性指向另一个你需要包含的另一个文件即可,也可以通知制定宽(width),高(height)等。比如:
<iframe name="content_frame" marginwidth=0 marginheight=0 width=100% height=30 src="import.htm" frameborder=0></iframe>
--------------------------------------------------------------------------------
用IFRAME实现网页的内嵌和预载
http://www.sina.com.cn 2001/09/04 14:37 中国电脑教育报 刘明锋
在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢?下面笔者介绍用iframe来实现的方法。
iframe元素的功能是在一个文档里内嵌一个文档,创建一个浮动的帧。其部分属性简介如下:
name:内嵌帧名称
width:内嵌帧宽度(可用像素值或百分比)
height:内嵌帧高度(可用像素值或百分比)
frameborder:内嵌帧边框
marginwidth:帧内文本的左右页边距
marginheight:帧内文本的上下页边距
scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)
src:内嵌入文件的地址
style:内嵌文档的样式(如设置文档背景等)
allowtransparency:是否允许透明
明白了以上属性后,我们可用以下代码实现,在main.htm中把samper.htm文件的内容显示在一个高度为80、宽度为100%、自动显示边框的内嵌帧中:
〈iframe name="import_frame" width=100%
height=80 src="samper.htm" frameborder=auto〉
〈/iframe〉
不错吧,马上“Ctrl+C”、“Ctrl+V”试试。
有时我们为强调页面的某项内容,想让它先于页面的其他内容显示。同样用iframe即可轻松实现:
先把要强调显示的内容另存为一个文件,如first.htm,然后通过一个预载页index.htm,内容如下:
〈meta http-equiv="refresh" content="3,url=index2.htm"〉
〈body〉
页面加载中,请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉
〈/body〉
主文件index2.htm
〈body〉
〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉
〈/body〉
first.htm的内容就会先于页面的其他内容出现在您的浏览器里了,是不是很简单?再“Ctrl+C”、“Ctrl+V”一次?
参考资料:
http://zhidao.baidu.com/question/486568.html
http://tieba.baidu.com/f?kz=267407530
http://baike.baidu.com/view/964150.htm
分享到:
相关推荐
在网页设计和开发中,`iframe`(Inline Frame)标签是一种强大的工具,它允许我们将一个网页嵌入到另一个网页中,实现部分内容的独立加载和刷新,从而提高用户体验。`iframe`广泛应用于网站后台、模块化内容展示、...
下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的方法以及相关属性。 首先,`<iframe>` 标签的基本结构如下: ```html <iframe src="目标URL" width="宽度" height="高度" frameborder="边框" margin...
在本篇文章中,我们将深入探讨如何使用`iframe`标签结合Vue和React框架来实现在网页中预览PDF文件。 首先,`iframe`标签的基本用法如下: ```html <iframe src="path_to_your_pdf.pdf" width="100%" height="500">...
在网页开发中,"基于iframe的js动态标签tab"是一个常见的功能实现,它结合了JavaScript、IFrame和Tab标签页的特性,为用户提供了一个交互式的浏览体验。这种技术主要用于在单个页面上加载和切换多个独立的内容区域,...
HTML使用iframe标签引用外部网页时,可以设置外部网页的显示比例适配当前iframe的大小,兼容各种浏览器哦
在这个“两个jquery实现iframe多标签页例子”中,我们将探讨如何利用jQuery来创建具有动态切换功能的多标签页,并在每个标签页内嵌入iframe,以展示不同的Web内容。 首先,`iframe`(inline frame)是一种HTML元素...
在网页设计中,`<iframe>`元素是一种非常实用的工具,它允许我们在一个网页中嵌入另一个网页,比如展示文档、视频或者地图等。当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入...
总的来说,理解和掌握iframe的使用,以及如何实现自适应高度,对于提升网页交互体验至关重要。同时,封装JavaScript函数是提高代码复用性和维护性的良好实践,尤其是在大型项目中。通过深入学习和实践,我们可以更好...
本教程将详细讲解如何使用JavaScript实现一个可关闭的iframe内嵌tab标签组件。这个组件能够帮助用户在同一个页面中方便地切换和管理多个内容区域,而无需刷新整个页面。 首先,`iframe`是HTML5中的一个元素,它允许...
- JSONP(JSON with Padding):如果跨域问题存在,可以使用JSONP技术,通过动态创建script标签实现非同源策略限制的跨域通信。 4. 安全与优化: - 跨域安全:确保在进行跨域交互时遵循同源策略,以防止恶意攻击...
如果`<Object>`标签用于嵌入的是网页内容,可以考虑使用`<iframe>`标签,它通常有更好的兼容性和更少的布局问题。 6. **JavaScript解决方案**: 如果以上方法都不能解决问题,可以考虑使用JavaScript来检测`...
iframe 标签内部可以包含其他网页的内容,例如图片、视频、音频等。然而,在 Android WebView 中,如果我们不做特殊处理,iframe 标签内部的跳转将无法被拦截。 那么,如何在 Android WebView 中拦截 iframe 标签...
通过以上所述,我们可以看到在Unigui框架下实现网页iframe交互的完整流程,包括了iframe的基本使用、通信机制、跨域处理以及性能优化等方面。理解并熟练掌握这些知识点,将有助于开发出功能丰富且用户友好的Web应用...
在上面的例子中,使用了`onload`事件来监听`iframe`内容加载完成,然后通过`document.all['myframe']`获取到`iframe`元素,并通过`myframe.document.body.scrollHeight`获取内部文档的实际高度,最后将这个高度设置...
在Flex中,我们不能直接使用HTML的`iframe`标签,但可以通过Flash Player的API和Flex组件库来实现类似的功能。 2. **使用NativeWindow API** Flex提供了一个`NativeWindow`类,可以创建和控制独立于应用程序主窗口...
1. **使用`window.postMessage`**:这是一种现代浏览器支持的跨域通信方式,通过向`window`对象发送消息,可以在不同源的iframe之间传递数据。发送端使用`postMessage(data, targetOrigin)`,接收端监听`message`...
总的来说,"iframe实现左侧菜单右侧页面简单示例"是一个很好的教学资源,它涵盖了网页布局、iframe嵌套、CSS样式设计等基础知识,对于初学者来说,可以通过这个实例学习并掌握这些技能,为构建更复杂的Web应用打下...
例如,在A页面的iframe标签中添加`scrolling="auto"`可以自动根据内容显示滚动条。 ### 使用JavaScript解决滚动条问题 对于第二种情况,即允许iframe根据内容自动伸展的情况,推荐使用JavaScript来动态调整iframe的...
### 符合W3C网页标准的`<iframe>`标签使用方法详解 #### 一、引言 在网站开发过程中,使用`<iframe>`标签来嵌入其他网页或内容是一种常见的做法。然而,直接使用`<iframe>`标签可能会导致不符合W3C网页标准的问题...
- `iframe`标签是HTML5中保留的一个元素,通过`<iframe src="url"></iframe>`来插入一个网页。 - `src`属性定义了要嵌入的网页URL,可以是相对路径或绝对路径。 - `iframe`可以设置高度、宽度等样式属性,以适应...