`
- 浏览:
183068 次
- 性别:
- 来自:
南京
-
Iframe标记
又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用
的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，
另外，还可以多次在一个页面内显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视。
Iframe标记的使用格式是: <Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"></iframe>
src：文件的路径，既可是HTML文件，也可以是文本、ASP等；可以是相对地址，也可以是绝对地址。
width、height："画中画"区域的宽与高；
scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动
条；如为Yes，则显示;
FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。
marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth="20"，单位是pix。
marginheight:网页中内容在表格顶部预留的高度；
hspace:网页右上角的的横坐标；
vspace:网页右上角的纵坐标；
name为对象的名称。该属性给对象取名，以便其他对象利用。
id指定该标记的唯一ID选择符。
noresize IE专有属性，指定浮动帧不可调整尺寸。
bordercolor浮动帧边框的颜色。color可以是RGB色（RRGGBB），也可以是颜色名。
framespacing相邻浮动帧之间的间距。取值为正整数和0，单位为像素。
父窗体与浮动帧之间的相互控制
在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体
中访问子窗体或相反都必须清楚对象层次，才能通过程序来访问并控制窗体。
1、在父窗体中访问并控制子窗体中的对象
在父窗体中，Iframe(即子窗体)是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。
现在就有一个问题，即我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档
对象模型DOM对Iframe所含的HTML进行一系列控制。
比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：
<Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"></iframe>
test.htm文件代码为:
<html>
<body>
<h1 id="myH1">hello,my boy</h1>
</body>
</html>
如我们要改变ID号为myH1的H1标记里的文字为hello,my dear
可用: document.myH1.innerText="hello,my dear"(其中，document可省)
在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。
2、在子窗体中访问并控制父窗体中对象
在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。
如example.htm：
<html>
<body onclick="alert(tt.myH1.innerHTML)">
<Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"></iframe>
<h1 id="myH2">hello,my wife</h1>
</body>
</html>
如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"
可以这样写：parent.myH2.innerText="hello,my friend"
这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。
Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。
试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或
函数，减省了多少繁琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需
修改一个父窗体的版式即可了。
有一点要注意，Nestscape浏览器不支持Iframe标记，但在时下IE的天下，这似乎也无大碍，广泛采用Iframe标记，既为自己(网站)着了
想，又为网友节省了网费，何乐而不为？
分享到：
相关推荐
基于iframe优雅实现全新的微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用postMessage方法来完成基座项目和子...
在网页开发中，`<iframe>`元素是一种非常实用的工具，它允许我们在一个页面中嵌入另一个页面的内容，实现页面的组合或者隔离加载。然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容...
本篇文章将深入探讨两个关键知识点：`iframe`跨域问题以及`iframe`页面的自适应。 一、`iframe`跨域问题 跨域是Web开发中的一个重要概念，它限制了浏览器从一个源获取另一个源的资源，以保护用户的安全。当`iframe...
在使用easyui框架开发Web应用时，特别是在使用tab布局的时候，开发者可能会遇到页面内容被放置在iframe中时，页面多次加载的问题。这种情况尤其会在使用easyui的tab布局时发生，因为easyui会默认加载所有tab的内容，...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
本实例“iframe对另一个iframe控制的Demo”展示了如何通过JavaScript或者jQuery实现一个iframe对另一个iframe的交互，以及如何控制iframe的显示与隐藏。这种技术广泛应用于构建复杂的Web应用程序，如页面内的多窗口...
`iframe`跨域消息传递是解决这个问题的关键技术，它允许不同源的`iframe`和主页面之间安全地交换数据。 标题"iframe消息监听传递"主要涉及到两个核心概念：`postMessage`和`message`事件。这两个API是HTML5引入的，...
Iframe 内存泄露分析 Iframe 内存泄露分析是指在使用 Iframe 时，由于互相引用、闭包、跨页面泄漏、伪泄漏等原因，导致浏览器内存泄漏的问题。这种问题在 Ajax 盛行以前并不是什么大问题，因为都是通过页面跳转和...
在前端开发过程中，DIV元素被IFRAME遮挡是一个常见的问题，尤其是当页面布局复杂或存在多层嵌套的元素时。以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素...
本文将详细讲解如何利用IFrame解决这些问题，特别是针对Flex菜单的遮挡问题。 首先，理解Flex和IFrame的基本概念是必要的。Flex是一种基于ActionScript和MXML的开源框架，用于构建富互联网应用程序（RIA）。而...
然而，有时嵌入的网页内容尺寸可能会超过iframe的可视区域，这时浏览器会自动为iframe添加滚动条，以便用户能够滚动查看整个内容区域。虽然这对于某些情况可能是必要的，但在其他一些情况下，开发者可能希望去除滚动...
本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能，以便于创建更丰富的用户体验和更高效的页面加载策略。 首先，我们需要理解iframe的基本概念。Iframe（Inline Frame）是HTML中的一个元素，它允许我们在...
### iframe高度自适应技术详解 在网页开发过程中，经常会遇到需要在一个页面中嵌入另一个页面的需求，这通常通过HTML的`iframe`元素实现。然而，一个常见的问题是当嵌入的内容高度变化时，如何使`iframe`的高度能够...
### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...
在多页面交互的场景下，`iframe`中的子页面与父页面以及与其他兄弟`iframe`之间的通信就显得尤为重要。本文将详细讲解如何实现`iframe`兄弟页面之间的相互调用。 首先，理解`iframe`的结构是关键。一个`iframe`元素...
其中，"js调用-嵌入iframe"是JS在处理页面元素，特别是与IFrame（内联框架）交互时的一个重要技术。IFrame允许在单一网页中嵌入另一个网页，从而实现内容的复用或隔离。下面我们将详细探讨这一主题。 **1. IFrame...
### 外部滚动条控制iframe：深入解析与实践 在网页设计中，iframe（Inline Frame）是一种常用的HTML元素，用于在当前文档内嵌入另一个HTML文档。然而，默认情况下，iframe内的滚动行为是独立于主页面的，即其滚动条...
标题“iframe（图片过渡效果欣赏）”暗示我们将探讨如何使用`iframe`来创建引人注目的动态图片展示。 `iframe`的基本语法如下： ```html <iframe src="URL" width="宽度" height="高度" frameborder="0" scrolling=...
然而，由于`iframe`本质上是独立的窗口，因此在不同`iframe`之间传递数据可能会遇到跨域问题。本篇文章将详细介绍如何使用JavaScript来实现在`iframe`之间传递值。 1. 同源策略与跨域限制： JavaScript遵循同源...
在这种情况下，`<iframe>` 标签成为了一个非常实用的工具。`iframe` 是 "inline frame" 的缩写，它允许我们在主页面中嵌入一个独立的、可自定义的子页面。下面我们将详细讲解如何使用`iframe`在网页中嵌入其他网页的...