iframe语法介绍和iframe标识使用

2024-04-29 03:38

本文主要是介绍iframe语法介绍和iframe标识使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

Iframe是个比较新的标识。但是从它的参数来说和普通的html标识没有什么大的区别,相信大家都用过frame(框架)来布局你的网页,其实iframe和frame功能一样,不同的是它是个浮动框架,你可以把Iframe布置在你网页中的任何位置,包括<layer>层中,这种极大的自由度可以给网页设计 带来很大的灵活性,所以学会使用它是非常必要的。

下面介绍它的主要属性

Name="" 给框架命名,这样就可以使用你的命名为链接中的target属性提供参数

Src="" 当前框架所链接的页面地址

Frameborder="" 浮动框架的边框大小,默认值为1显示边框,一般最好设为0不显示

Marginwidth="" 浮动框架框边与插入页面之间空白的宽度,单位pixels

Marginheight="" 浮动框架框边与插入页面空白的高度,单位pixels

Scrolling="" 滚动条,有3个值:auto自动,yes 总是显示,no 不显示

align="MIDDLE" 可选值为 left, right,

    纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀”的东西“日益消得钱憔悴”了,有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内容呢?
  答案很肯定:应用Iframe标记!

  一、Iframe标记的使用

  提起Iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟Frame就不会陌生了。Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教程内容不同之外,页面其它部分内容都是相同的,如果一页一页地做笨页面,这似乎太让人厌烦了,这时突发奇想,如果有一种方法让页面其它地方不变,只将教程做成一页一页的内容页,不含其它内容,在点击上下翻页链接时,只改变教程内容部分,其它保持不变,这样,一是省时,另则以后如教程有个三长两短的变动,也很方便,不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。

  Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象的比喻即“画中画“电视。

  现在我们谈一下Iframe标记的使用。

  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。

  比如:

  <Iframe src="http://netschool.cpcw.com/homepage" width="250" height="200" scrolling="no" frameborder="0"></iframe>

  二、父窗体与浮动帧之间的相互控制

  在脚本语言与对象层次中,包含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 οnclick="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来表示,这样,不必重复写相同的内容,这有点象程序设计 中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。

这篇关于iframe语法介绍和iframe标识使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/945020

相关文章

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比

MySQL常用字符串函数示例和场景介绍

《MySQL常用字符串函数示例和场景介绍》MySQL提供了丰富的字符串函数帮助我们高效地对字符串进行处理、转换和分析,本文我将全面且深入地介绍MySQL常用的字符串函数,并结合具体示例和场景,帮你熟练... 目录一、字符串函数概述1.1 字符串函数的作用1.2 字符串函数分类二、字符串长度与统计函数2.1

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程:创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

C#中lock关键字的使用小结

《C#中lock关键字的使用小结》在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时,其他线程无法访问同一实例的该代码块,下面就来介绍一下lock关键字的使用... 目录使用方式工作原理注意事项示例代码为什么不能lock值类型在C#中,lock关键字用于确保当一个线程位于给定实例的代码块中时