`
woshixushigang
  • 浏览: 578422 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

iframe用法

阅读更多

 

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”一次?

 

分享到:
评论

相关推荐

    HTML iframe 用法总结收藏

    Iframe用法精析 &lt;iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src=move-ad.htm&gt;&lt;/iframe&gt; &lt;IFRAME&gt;用于设置文本或图形的浮动图文框或容器。 BORDER &...

    关于iframe的用法

    1. **内容聚合**:网站可以使用iframe展示来自不同来源的内容,如新闻、天气预报或者社交媒体动态。 2. **页面部分更新**:在不刷新整个页面的情况下,通过iframe更新特定区域的信息,提高用户体验。 3. **广告嵌入*...

    IFrame用法

    **二、IFrame的使用场景** 1. **页面局部刷新**:通过在IFrame中加载不同的页面,可以实现页面的某个部分动态更新,而无需重新加载整个页面。 2. **嵌入多媒体**:例如,通过IFrame嵌入YouTube视频,或者嵌入Vimeo...

    iframe详细用法

    iframe详细用法iframe详细用法iframe详细用法iframe详细用法iframe详细用法

    FRAME与IFRAME的使用方法与区别

    ### FRAME与IFRAME的使用方法与区别 #### 框架的基本概念 在Web开发领域,`FRAME`与`IFRAME`都是用来展示多个文档的容器元素,但它们的工作方式有所不同。`FRAME`是一种早期的技术,它允许开发者在一个HTML页面中...

    iframe的2种用法

    `iframe`的使用为网页设计师提供了极大的灵活性,可以实现诸如内容嵌入、页面部分更新等功能。本文将深入探讨`iframe`的两种主要用法:指定页面的嵌套和动态指定页面的嵌套。 ### 1. 指定页面的嵌套 这是`iframe`...

    vue基于iframe优雅实现全新的微前端方案,继承iframe的优点,补足 iframe 的缺点,让 iframe 焕发新生

    1、使用postMessage方法来完成基座项目和子项目之间的通讯 2、使用position: fixed解决iframe的弹窗及遮罩层问题 3、使用requestFullscreen()解决iframe里的全屏问题 4、使用history解决浏览器的后退问题 5、页面...

    Iframe的用法

    ### Iframe的用法详解 Iframe是一种常用的HTML标签,用于在一个HTML页面中嵌入另一个HTML页面或资源,实现“画中画”的效果。本文将详细介绍Iframe的基本属性及其应用场景。 #### 基本语法 Iframe的基本使用格式...

    使用iframe在网页中嵌入其他网页的方法

    下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的方法以及相关属性。 首先,`&lt;iframe&gt;` 标签的基本结构如下: ```html &lt;iframe src="目标URL" width="宽度" height="高度" frameborder="边框" margin...

    基于js的iframe 可关闭tab标签组件使用方法

    以上就是基于JavaScript的iframe可关闭tab标签组件的实现方法。这个组件可以根据实际需求进行扩展和定制,比如添加动画效果、缓存iframe内容以提高性能等。希望这个教程对你在网页开发中实现类似功能有所帮助。如果...

    iframe 跨域解决方法

    在Web开发中,`iframe` 是一个非常常用的元素,它允许我们在一个页面中...理解并正确使用上述方法,可以有效地解决跨域限制,实现`iframe`间的通信。在实际项目中,务必确保遵循最佳实践,同时注意安全性和性能影响。

    asp.net iframe的用法

    下面将详细解释 `iframe` 的使用方法及其相关知识点。 1. **基本结构与属性** - `width`: 定义 `iframe` 的宽度,可以是像素值或百分比。 - `height`: 定义 `iframe` 的高度,同样可以是像素值或百分比。 - `...

    iframe兄弟页面相互调用

    通过这两个属性,我们可以访问到其他`iframe`或父页面的全局对象,进而调用其中的方法或读取变量。 2. **利用`postMessage`和`message`事件:** HTML5引入了`postMessage`API,允许不同源的页面之间安全地传递数据...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    需要注意的是,`document.frames`是老式的方法,用于访问`&lt;frameset&gt;`内的`&lt;frame&gt;`元素,而在现代浏览器中,更推荐使用`contentWindow`或`contentDocument`来访问`&lt;iframe&gt;`的内容。在这个例子中,我们使用了`...

    ASP.NET iframe 的通用用法

    ### ASP.NET 中 iframe 的通用用法详解 #### 一、iframe 的基本概念 `&lt;iframe&gt;` 是 HTML 文档中用于嵌入另一个 HTML 文档的标签。它可以用来在当前页面中展示其他网页的内容,或者用于创建复杂的多窗口布局。在 ...

    iframe框架使用(完美版)

    首先,我们要理解iframe的基本用法。`&lt;iframe&gt;`标签通常包含`src`属性,用于指定要嵌入的页面的URL。例如: ```html &lt;iframe src="https://example.com" width="600" height="400"&gt;&lt;/iframe&gt; ``` 在实际应用中,...

    div被iframe遮住的几种情况及解决方法

    以下将详细阐述几种DIV被IFRAME遮挡的情况,并提供相应的解决方法。 首先,要了解的是IFRAME是一种HTML元素,它允许在当前HTML文档中嵌入另一个独立的HTML页面。尽管这一特性带来了许多便利,但同时也带来了诸如...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    通过以上方法,我们可以确保Panel根据IFrame内容的高度动态调整,避免滚动条的出现或内容被裁剪。在实际应用中,应根据项目需求和兼容性考虑选择最适合的解决方案。同时,确保对IFrame的安全性进行充分考虑,防止跨...

Global site tag (gtag.js) - Google Analytics