HTML中iFrame标签有哪些用法

这次给大家带来htmliframe标签有哪些用法,在html中iframe标签用法的注意事项有哪些,下面就是实战案例,一起来看一下。

最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下:
  1. 作为弹出层铺底覆盖

  大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素,那就有得头疼了(原理就不在这里赘述了)。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下:

    与弹出p同级放入iframe
    保证iframe的 z-index小于弹层p z-index
    增加window resize和scroll事件, 保证iframe能盖住整张页面

  部分代码

立即学习“前端免费学习笔记(深入)”;

var iframe = U.isie6() ? '' : '';   $container.append(iframe).appendTo($body);

  2.  跨域写入cookie

  有 a.com和b.com两个domain。在某些条件下b的部分功能会出现在a页面上。 有时需要操作a页面的时候对b.com domain的cookie做一些操作以方便用户下次访问。我们只需要在a页面加入一个iframe(动态或固定)即可,src属性指向b的一张代理页 面,在这张页面执行cookie操作即可。

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

HTML的代码书写有哪些规范

HTML你一定要知道的优化技巧

XHTML中有哪些常用的标签

以上就是HTML中iFrame标签有哪些用法的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545627.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:11:30
下一篇 2025年12月21日 17:11:50

相关推荐

  • HTML的checkbox和radio怎样美化样式

    这次给大家带来html的checkbox和radio怎样美化样式,html的checkbox和radio美化样式的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML的checkbox和radio样式美化的简单实例 checkbox: input[type=”checkbox”] { disp…

    好文分享 2025年12月21日
    000
  • html关于PHP你必须知道的重要知识点

    这次给大家带来html关于php你必须知道的重要知识点,html里关于php的注意事项有哪些,下面就是实战案例,一起来看一下。 用frameset、frame和iframe还实现多窗口 2.在图片上利用映射距离usemap来实现按钮跳转。——第8尾集 3.表单必须要有name…

    好文分享 2025年12月21日
    000
  • 在HTML中iframe与frame有哪些区别

    这次给大家带来在html中iframe与frame有哪些区别,在html中使用iframe与frame的注意事项有哪些,下面就是实战案例,一起来看一下。 不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块…

    好文分享 2025年12月21日
    000
  • 标注HTML元素时class与id有什么不同

    这次给大家带来标注html元素时class与id有什么不同,标注html元素时class与id的注意事项有哪些,下面就是实战案例,一起来看一下。 在网页中有很复杂的 HTML 结构,如果我们使用 CSS 来定义相关的样式,就需要为这些结构指定相应的标志,然后再编写相应的 CSS 选择器来获取他们赋予…

    好文分享 2025年12月21日
    000
  • HTML的表格应该怎样布局

    这次给大家带来html的表格应该怎样布局,布局html的表格注意事项有哪些,下面就是实战案例,一起来看一下。 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局。但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的…

    好文分享 2025年12月21日
    000
  • 在html中如何实现下载功能

    这次给大家带来在html中如何实现下载功能,在html中实现下载功能的注意事项有哪些,下面就是实战案例,一起来看一下。 新项目基本告一段落,第一次完成前后端分离的集成,遇到的坑自然不少。 来说说第一天遇到的其中一个坑吧。 ——关于下载的问题。。。 以前的做法,大家都喜爱用标签吧。而我一开始也是用a标…

    好文分享 2025年12月21日
    000
  • HTML的基础笔记

    这次给大家带来html的基础笔记,下面就是实战案例,一起来看一下。 一,网页基础结构: 我的第一个网页 这是我的第一个网页 注意:在HTML中,标签大部分都是成对出现的。有开始就有结束 如果不是成对出现的标签,在标签的后面加上/表示结束。 二、基本标签 立即学习“前端免费学习笔记(深入)”; 1、h…

    好文分享 2025年12月21日
    000
  • HTML的基本概念详细介绍

    这次给大家带来html的基本概念详细介绍,html基本概念的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是 HTML? HTML 是用来描述网页的一种语言。 •HTML 指的是超文本标记语言 (Hyper Text Markup Language)•HTML 不是一种编程语言,而是一种标记…

    好文分享 2025年12月21日
    000
  • HTML的标题总结推荐

    这次给大家带来html的标题总结推荐,html标题的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML: 标题 标题(Heading)是通过 – 等标签进行定义的。 定义最大的标题。 定义最小的标题。This is a headingThis is a headingThis i…

    好文分享 2025年12月21日
    000
  • HTML文本格式的知识总结

    这次给大家带来html文本格式的知识总结,使用html文本格式的知识总结的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML 文本格式化标签 标签 描述 定义粗体文本 呈现为被强调的文本 定义斜体字 定义小号字 定义重要文本 定义下标字 定义上标字 定义插入字 定义删除字 通常标签 替换加粗…

    好文分享 2025年12月21日
    000
  • HTML段落的知识总结

    这次给大家带来html段落的知识总结,使用html段落的注意事项有哪些,下面就是实战案例,一起来看一下。 HTML 段落 段落是通过 标签定义的。 实例 This is a paragraph 立即学习“前端免费学习笔记(深入)”;This is another paragraph  提示:忘记使用…

    好文分享 2025年12月21日
    000
  • HTML的meta标签常见用法介绍

    这次给大家带来html的meta标签常见用法介绍,使用html的meta标签的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是mata标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的…

    好文分享 2025年12月21日
    000
  • HTML的基础知识.关于css样式表和样式属性的详细介绍

    这次给大家带来html的基础知识.关于css样式表和样式属性的详细介绍,使用html的基础知识css样式表和样式属性的注意事项有哪些,下面就是实战案例,一起来看一下。 一、position:fixed     锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。 二、position:a…

    好文分享 2025年12月21日
    000
  • HTML基础知识,关于超链接设置的样式的详细介绍

    这次给大家带来html基础知识,关于超链接设置的样式的详细介绍,设置html的超链接样式的注意事项有哪些,下面就是实战案例,一起来看一下。 ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 立即学习“前端免费学习笔记(…

    好文分享 2025年12月21日
    000
  • html如何制作细线表格

    这次给大家带来html如何制作细线表格,用html制作细线表格的注意事项有哪些,下面就是实战案例,一起来看一下。 关于这个细线表格的制作方法,百度一下可能就会有答案告诉你设置这几个值:给table设置border=”0″ cellspacing=”1″…

    好文分享 2025年12月21日
    000
  • html块级标签,行内标签,行内块标签的显示模式有哪些

    这次给大家带来html块级标签,行内标签,行内块标签的显示模式有哪些,使用html块级标签,行内标签,行内块标签显示模式的注意事项有哪些,下面就是实战案例,一起来看一下。 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签。那么初学者在刚使用标签的时候会发现有些属性在一些标…

    好文分享 2025年12月21日
    000
  • 关于HTML操作滚动条的方法

    这次给大家带来关于html操作滚动条的方法,用html操作滚动条的注意事项有哪些,下面就是实战案例,一起来看一下。 html 标签加属性     2.body中加入以下代码 html{ overflow-x: hidden; overflow-y: hidden; } html页面去除滚动条的方法 …

    好文分享 2025年12月21日
    000
  • HTML的语法详解

    这次给大家带来html的语法详解,怎么使用html的语法?使用html语法的注意事项有哪些,下面就是实战案例,一起来看一下。 什么是HTML标记语言? HTML是表示网页信息的符号标记语言。 2.HTML的标记和他的属性 1.HTML文档的保存格式:.html、.htm、.xhtml 立即学习“前端…

    好文分享 2025年12月21日
    000
  • HTML的编辑基础(新手必看篇)

    这次给大家带来html的编辑基础(新手必看篇),下面就是实战案例,一起来看一下。 打开DREAMWEAVER,新建HTML。。 body的属性: bgcolor                页面背景色 background            背景壁纸、图片 立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月21日
    000
  • html的特殊字符-css3 content:”特殊符号”应该如何使用

    这次给大家带来html的特殊字符-css3 content:”特殊符号”应该如何使用,使用html的特殊符号应该如何使用的注意事项有哪些,下面就是实战案例,一起来看一下。 项目中用到的一些特殊字符和图标 html代码 css代码.cross{ width: 20px; hei…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信