iframe属性与用法

article/2025/9/8 0:08:28

iframe标签

小明说,iframe是能耗最高的一个元素,尽量减少使用。

小蓝说,iframe的安全性太差,尽量减少使用。

虽然他们说的是真的,但是iframe的强大功能是不容忽视的,而且现在不乏公司正在使用它。

标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

所有的主流浏览器都支持标签。你可以把提示的文字放到 和 里面,这样不支持 的浏览器就会出现提示的文字。。

1、定义和用法

name 属性规定 iframe 的名称。

name 元素的 name 属性用于在 JavaScript 中引用元素,或者作为 a 或 form 元素的 target 属性的值,或者作为 input 或 button 的 formtarget 属性的值。

2、HTML 4.01 与 HTML5之间的差异
无。

2、1HTML 4.01 与 XHTML 之间的差异

在 XHTML 中,name 属性以废弃,并将被移除。请使用 id 属性代替。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。

3、浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持 name 属性。

4、iframe 的常用属性:

name : 规定 的名称。
width: 规定 的宽度。
height :规定 的高度。
src :规定在 中显示的文档的 URL。
frameborder : 规定是否显示 周围的边框。 (0为无边框,1位有边框)。
align :  规定如何根据周围的元素来对齐 。 (left,right,top,middle,bottom)。
scrolling : 规定是否在 中显示滚动条。 (yes,no,auto)

在这里插入图片描述
具体详情请参考W3school:https://www.w3school.com.cn/tags/tag_iframe.asp

5、iframe案例 代码片.

// iframe自定义属性
<div class="page-content" style="width: 100%;"><iframe src="main.html" width="100%" height="1020px" frameborder="0" scrolling="yes" name="mainFrame" seamless="1" id="external-frame" onload="setIframeHeight(this)"></iframe>
</div>

6、那如何获取iframe里面的内容呢?

// 获取iframe内容
var iframe = document.getElementById("myrame"); //获取iframe标签
var iwindow = iframe.contentWindow; //获取iframe的window对象
var idoc = iwindow.document; //获取iframe的document对象
console.log(idoc.documentElement); //获取iframe的html
console.log("body",idoc.body);

点击跳转iframe标签页面

a标签里必须有href、target俩个属性;href属性写跳转页面或者路径即可,target属性必须写为iframe标签里的name属性里的属性值。当点击这个路径即可跳转到自定义页面 代码片.

// 配合iframe跳转的必要自定义属性
<a href="main.html" target="mainFrame"><i class="icon-home"></i>跳转Iframe页面
</a>

1、iframe 透明

在transparentBody.htm文件的标签中,我已经加入了style=“background-color=transparent” 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解:
2、iframe 的优缺点

优点:

重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少数据的传输,减少网页的加载时间);

技术简单,使用方便,主要应用于不需要搜索引擎来搜索的页面;

方便开发,减少代码的重复率(比如页面的header,footer);

缺点:

会产生很多的页面,不易于管理;

不易打印;

多框架的页面会增加服务气得http请求;

浏览器的后退按钮无效等;


http://chatgpt.dhexx.cn/article/J6sHCRb1.shtml

相关文章

iframe的简单使用

看人家写的真的是摸不着头脑。自己写、还是清楚 局部数据的刷新&#xff1a;可以使用ajax。这里只是简单的演示 只作&#xff1a;例子使用、简单演示页面跳转 a标签中target属性和iframe中的name对应。相当于将该链接加载到当前的iframe界面 我这里使用maven项目演示 index.…

iframe是什么?iframe用法详解

经常和网站打交道或者经常建站的朋友对iframe肯定不陌生&#xff0c;网站有了iframe会变得更加美观、大气。对于初涉互联网的新手来说&#xff0c;iframe并不熟悉&#xff0c;那么iframe到底是什么&#xff1f;iframe用法有哪些呢&#xff1f; iframe是什么 iframe就是我们常…

MD5加密解密算法 MD5Utils

import java.security.MessageDigest;public class MD5Utils {/*** MD5加码 生成32位md5码 */public static String string2MD5(String inStr) {MessageDigest md5 null;try {md5 MessageDigest.getInstance("MD5");} catch (Exception e) {System.out.printl…

md5 java_JAVA使用MD5加密解密

MD5消息摘要算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于确保信息传输完整一致。 这波解释是不是很正经严肃,好像看懂了,但是如果有人问MD5是什么,MD5就是...就是小编也不知道,通俗一…

Md5(base64)加密与解密实战

Md5&#xff08;base64&#xff09;加密与解密实战 在对某一个CMS系统进行安全检测时&#xff0c;通过注入点获取其管理员表中的管理员和密码数据&#xff0c;但由于不知道该密码数据采用何种加密方式&#xff0c;虽然知道CMS系统管理后台&#xff0c;但苦于没有破解管理员的密…

css下拉菜单汇总案例

1.基础的下拉菜单 将鼠标移到元素上时出现的下拉框。效果如下&#xff1a; 代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"I…

html下拉折叠菜单,纯CSS实现折叠菜单下拉菜单

莱芜网站排名的大宝给大家介绍一种纯CSS实现下拉菜单、纯CSS实现折叠菜单的方法&#xff0c;直接上代码&#xff1a;html> .renyuan {display: none;} .bm:hover .renyuan {display: block;} .bmt{background-color: aquamarine;} 部门1 人员1 人员2 人员3 部门1 人员1 人员…

CSS+JavaScript下拉菜单布局与代码执行

导读&#xff1a;今天来通过一个安居客web下拉菜单来总结一下怎么用css布局以及通过js切换css效果 头部的布局以及下拉菜单布局 实现代码&#xff1a; <html> <body><div class"box"><ul class"body"><li><a href"…

CSS实现的大型导航下拉菜单

阅读目录 阐述HTML结构CSS 预览 阐述 这是一款纯 CSS 实现的大型导航下拉菜单。 该大型菜单使用 HTML 和纯 CSS 代码制作&#xff0c;没有任何 js 代码&#xff0c;不依赖任意第三方插件。 适合用于栏目分类较多的大型网站使用。 HTML结构 该大型菜单的HTML结构如下&#x…

零基础CSS入门教程(29)–CSS下拉菜单实例

点此查看 所有教程、项目、源码导航 本文目录 1. 前言2. 开发过程2.1 HTML元素组成2.2 设定按钮样式2.3 设置菜单区域样式 2.4 设置菜单中链接样式2.5 设置下拉菜单样式 3. 小结 1. 前言 下拉菜单也是使用频率很高的网页控件&#xff0c;例如百度首页上方的【设置】按钮就是一…

css下拉菜单代码(用纯css实现下拉菜单)

用纯css代码写一个css下拉菜单&#xff0c;二级菜单opacity默认是0&#xff0c;鼠标在一级菜单hover时opacity就是1&#xff0c;opacity从0到1有一个transition过渡时间1秒钟&#xff0c;就实现了css下拉菜单动画缓慢出现效果&#xff0c;具体看下面例子代码。 css下拉菜单代码…

html用css做下拉菜单,纯css实现下拉菜单

纯css实现下拉菜单 1、效果如下&#xff1a; 2、html代码 时间最近 时间最近评论最多被赞最多 3、css代码 * { margin: 0; padding: 0; } ul { list-style: none; } .drop-box { box-sizing: border-box; width: 150px; font-size: 14px; text-align: center; border-radius: 1…

CSS下拉菜单

共有三种可悬停的下拉内容&#xff1a;下拉文本&#xff0c;下拉菜单&#xff0c;下拉式图像 一.下拉文本 当用户鼠标悬停到指定文本时&#xff0c;会出现的文本下拉框&#xff0c;下面是效果图&#xff1a; HTML <body><div class"wai"><span>把…

纯css 下拉选择,纯CSS实现的下拉菜单

实现效果 实现代码 html homewordpress themespluginstutorialsweb design resourceslinkstutorials html/cssjqueryother stuffthingsother stuffgraphic designinspirationcontactabout pure css drop down menu a simple dropdown navigation menu made with css only. drop…

CSS 下拉菜单

使用 CSS 创建可悬停的下拉列表。 1. 基础的下拉菜单 创建当用户将鼠标移到元素上时出现的下拉框。 代码如下&#xff1a; <!DOCTYPE html> <html> <head> <style> .dropdown {position: relative;display: inline-block; }.dropdown-content {dis…

html css下拉菜单居中,css如何设置下拉菜单?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版…

CSS 如何制作下拉菜单

下拉菜单 .dropdown 类使用 position:relative&#xff0c;当我们希望将下拉内容放置在下拉按钮的正下方&#xff08;使用 position:absolute&#xff09;时&#xff0c;需要使用该类。 .dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的&#xff0c;并将在悬…

Oracle Flex ASM

Oracle Flex ASM 允许 Oracle ASM 实例运行在与数据库服务器分离的物理服务器上。通过这种部署&#xff0c;更大的 Oracle ASM 实例集群可以支持更多的数据库客户端&#xff0c;同时减少整个系统的 Oracle ASM占用空间。当使用 Oracle Flex ASM 时&#xff0c;Oracle ASM 客户端…

从AssemblyInfo.cs里获得信息

AssemblyInfo.cs文件代码片段: [assembly: AssemblyTitle( "" )][assembly: AssemblyDescription( "" )][assembly: AssemblyConfiguration( "" )][assembly: AssemblyCompany( "" )][assembly: AssemblyProduct( " 飞鼠工作室 &…

.NET Assembly

Load GAC Assembly class Program ... { static void Main(string[] args) ...{ // 动态引用GAC的Assembly Assembly assembly Assembly.Load("GACDemo,Version1.0.0.0,Cultureneutral,PublicKeyTokenb821349f6886a4a6"); …