三分钟带你看完HTML5增强的【iframe元素】_iframe allow-top-navigation-程序员宅基地

技术标签： seamless srcdoc HTML5增强的iframe元素 iframe HTML5和CSS3的前世今生 sanbox HTML5+CSS3

HTML不再推荐页面中使用框架集，因此HTML5删除了<frameset>、<frame>和<noframes>这三个元素。不过HTML5还保留了<iframe>元素，该元素可以在普通的HTML页面中使用，生成一个行内框架，可以直接放在HTML页面的任意位置。除了指定id、class和style之外，还可以指定如下属性：

src	指定一个URL，指定该iframe将装载哪个页面
name	设置iframe的名字
longdesc	也是指定URL，包含了iframe的长描述
scrolling	设置iframe中显示滚动条：yes、no、auto（大小不够时显示）
height	设置iframe的高度
width	设置该iframe的宽度
frameborder	设置是否显示该iframe的边框
marginheight	设置该iframe的顶部和底部的页边距
marginwidth	设置iframe的左侧和右侧的页边距

下面代码中，定义了一个行内框架

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 行内框架 </title>
</head>
<body>
<iframe src="img1.html" width="200" height="120"></iframe>
主页面内容
</body>
</html>

1.HTML5新增的srcdoc属性

HTML5新增的srcdoc属性允许直接指定HTML片段，这样<iframe>元素将直接显示该srcdoc所指定的HTML片段，如果浏览器暂时不支持srcdoc，那么将会继续显示srcdoc所指定的页面内容。目前主流的浏览器都支持：比如说谷歌、火狐等等。例如，如下代码定义了同时指定srcdoc和src属性的<iframe>元素，此时srcdoc属性将会覆盖src属性。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 行内框架 </title>
</head>
<body>
<iframe src="img1.html" width="300" height="120"
	srcdoc="<h3>HTML 5</h3><div>HTML 5是重要的标记语言</div>"></iframe>
主页面内容
</body>
</html>

上面的粗体字代表了srcdoc属性，此时<iframe>所生成的行内框架将直接显示该属性所指定的HTML片段，忽略src属性所指定的页面。显示的效果如下：

2.HTML5新增的seamless属性

seamless属性是一个支持boolean值的属性，指定了该属性的<iframe>所生成的框架看上去是原文档的一部分，不再显示边框和进度条。不过到目前为止，好像没有什么浏览器完全支持这个属性。

3.HTML5新增的sandbox属性

sandbox是一个安全性方面的属性，用于对框架中的增加一系列额外限制。该属性支持如下属性值：

属性	限制全部
allow-forms	允许框架内的表单进行提交
allow-same-origin	允许将框架内所加载的页面视为与使用该<iframe>元素的页面来自相同源（即使这两个页面来自不同源）
allow-scripts	允许框架内加载JavaScript
allow-top-navigation	允许将框架内所加载页面中的超链接导航到父级窗口

对于不指定sandbox属性的<iframe>元素所加载的HTML界面几乎不受任何限制，如果指定了sandbox为"",这就意味着限制了如下功能：

禁止页面内使用插件
禁止页面内的表单提交
页面的超链接只能加载到<iframe>框架内
<iframe>框架内所加载的网页被视为来自不同源，不同源的意思是对于两个页面对应的URL的域名不同或端口不同，就会禁止Ajax进行交互，禁止加载服务器，禁止页面从cookie读取内容。

3.1 allow-forms属性值

指定这个属性，可以允许<iframe>框架内的界面提交表单，通常和allow-same-origin属性结合使用。例如，指定allow-forms属性值

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 表单页面 </title>
</head>
<body>
<form action="addUser.action">
	用户名：<input type="text" name="name"/><br>
	密码：<input type="password" name="pass"/><br>
	<input type="submit" value="提交"/>
</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 行内框架 </title>
</head>
<body>
<iframe src="form.html" width="300" height="120"
	sandbox="allow-forms"></iframe>
主页面内容
</body>
</html>

除了在IE可以提交之外，其他浏览器都不能提交，如果将sandbox="allow-forms"改为sandbox="allow-forms allow-same-origin"，表单什么的就都可以提交了。浏览器要求必须是同源的才可以，因此才需要添加allow-same-origin属性值。

3.2 allow-scripts属性值

允许框架中使用JavaScript脚本，写了两个页面，如下所示：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 脚本页面 </title>
</head>
<body>
<a href="" onclick="this.innerHTML=this.innerHTML + '有趣'; alert('确定');">
单击我</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 行内框架 </title>
</head>
<body>
<iframe src="scripts.html" width="300" height="120"
	sandbox="allow-scripts"></iframe>
主页面内容
</body>
</html>

运行之后，超链接的内容发生了变化，此时页面的JavaScript脚本确实执行了，但第二条却没有执行，这是因为出于安全考虑，禁止了这个属性执行JavaScript执行对话框，当然IE除外，现在360也支持了，谷歌允许效果如下图所示。

3.3 allow-top-navigation属性值

允许<iframe>框架内页面中超链接在该行内框架的父级浏览器中打开，可以自己亲自试一试，第一个是nav.html。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 表单页面 </title>
</head>
<body>
<a href="http://www.crazyit.org" alt="疯狂Java联盟" target="_top">疯狂Java联盟</a>
</body>
</html>
target="_top">疯狂Java联盟</a>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 行内框架 </title>
</head>
<body>
<iframe src="nav.html" width="300" height="120" 
	sandbox="allow-top-navigation"></iframe>
主页面内容
</body>
</html>

target="_top"设置超链接需要直接在浏览器中打开，由于设置了sandbox="allow-top-navigation"属性，所以点击超链接会直接跳转到浏览器中。

3.4 allow-same-origin属性值

两个网页所在URL的域名相同、端口相同才能被当初同一源。出于安全考虑，如果两个网页不是同一源，那么网页是不允许使用Ajax进行交互的，一旦设置了allow-same-origin属性，就会被视为同源，加载服务器的内容，这些操作都需要JavaScript，因此常常需要与allow-scripts属性相结合使用，案例可以在我的资源库进行下载点击打开链接

如果有什么看不懂的地方或者哪里有问题，请在下方留言。

--------------如果大家喜欢我的博客，可以点击左上角的关注哦。

本文链接：https://blog.csdn.net/sujin_/article/details/80144310

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C#连接OPC C#上位机链接PLC程序源码 1.该程序是通讯方式是CSharp通过OPC方式连接PLC_c#opc通信-程序员宅基地

文章浏览阅读565次。本文主要介绍如何使用C#通过OPC方式连接PLC，并提供了相应的程序和学习资料，以便读者学习和使用。OPC服务器是一种软件，可以将PLC的数据转换为标准的OPC格式，允许其他软件通过标准接口读取或控制PLC的数据。此外，本文还提供了一些学习资料，包括OPC和PLC的基础知识，C#编程语言的教程和实例代码。这些资料可以帮助读者更好地理解和应用本文介绍的程序。1.该程序是通讯方式是CSharp通过OPC方式连接PLC，用这种方式连PLC不用考虑什么种类PLC，只要OPC服务器里有的PLC都可以连。_c#opc通信

Hyper-V内的虚拟机复制粘贴_win10 hyper-v ubuntu18.04 文件拷贝-程序员宅基地

文章浏览阅读1.6w次，点赞3次，收藏10次。实践环境物理机：Windows10教育版，操作系统版本 17763.914虚拟机：Ubuntu18.04.3桌面版在Hyper-V中的刚安装好Ubuntu虚拟机之后，会发现鼠标滑动很不顺畅，也不能向虚拟机中拖拽文件或者复制内容。在VMware中，可以通过安装VMware tools来使物理机和虚拟机之间达到更好的交互。在Hyper-V中，也有这样的工具。这款工具可以完成更好的鼠标交互，我的..._win10 hyper-v ubuntu18.04 文件拷贝

java静态变量初始化多线程，持续更新中_类初始化一个静态属性为线程池-程序员宅基地

文章浏览阅读156次。前言互联网时代，瞬息万变。一个小小的走错，就有可能落后于别人。我们没办法去预测任何行业、任何职业未来十年会怎么样，因为未来谁都不能确定。只能说只要有互联网存在，程序员依然是个高薪热门行业。只要跟随着时代的脚步，学习新的知识。程序员是不可能会消失的，或者说不可能会没钱赚的。我们经常可以听到很多人说，程序员是一个吃青春饭的行当。因为大多数人认为这是一个需要高强度脑力劳动的工种，而30岁、40岁，甚至50岁的程序员身体机能逐渐弱化，家庭琐事缠身，已经不能再进行这样高强度的工作了。那么，这样的说法是对的么？_类初始化一个静态属性为线程池

idea 配置maven，其实不用单独下载Maven的。以及设置新项目配置，省略每次创建新项目都要配置一次Maven_安装idea后是不是不需要安装maven了?-程序员宅基地

文章浏览阅读1w次，点赞13次，收藏43次。说来也是惭愧，一直以来，在装环境的时候都会从官网下载Maven。然后再在idea里配置Maven。以为从官网下载的Maven是必须的步骤，直到今天才得知，idea有捆绑的 Maven 我们只需要搞一个配置文件就行了无需再官网下载Maven包以后再在新电脑装环境的时候，只需要下载idea ，网上找一个Maven的配置文件放到默认的包下面就可以了！也省得每次创建项目都要重新配一次Maven了。如果不想每次新建项目都要重新配置Maven，一种方法就是使用默认的配置，另一种方法就是配置 .._安装idea后是不是不需要安装maven了?

奶爸奶妈必看给宝宝摄影大全-程序员宅基地

文章浏览阅读45次。家是我们一生中最重要的地方,小时候,我们在这里哭、在这里笑、在这里学习走路,在这里有我们最真实的时光,用相机把它记下吧。　　很多家庭在拍摄孩子时有一个看法,认为儿童摄影团购必须是在风景秀丽的户外,即便是室内那也是像大酒店一样...

构建Docker镜像指南，含实战案例_rocker/r-base镜像-程序员宅基地

文章浏览阅读429次。Dockerfile介绍Dockerfile是构建镜像的指令文件，由一组指令组成，文件中每条指令对应linux中一条命令，在执行构建Docker镜像时，将读取Dockerfile中的指令，根据指令来操作生成指定Docker镜像。Dockerfile结构：主要由基础镜像信息、维护者信息、镜像操作指令、容器启动时执行指令。每行支持一条指令，每条指令可以携带多个参数。注释可以使用#开头。指令说明FROM 镜像：指定新的镜像所基于的镜像MAINTAINER 名字：说明新镜像的维护（制作）人，留下_rocker/r-base镜像

随便推点

毕设基于微信小程序的小区管理系统的设计ssm毕业设计_ssm基于微信小程序的公寓生活管理系统-程序员宅基地

文章浏览阅读223次。该系统将提供便捷的信息发布、物业报修、社区互动等功能，为小区居民提供更加便利、高效的服务。引言：随着城市化进程的加速，小区管理成为一个日益重要的任务。因此，设计一个基于微信小程序的小区管理系统成为了一项具有挑战性和重要性的毕设课题。本文将介绍该小区管理系统的设计思路和功能，以期为小区提供更便捷、高效的管理手段。四、总结与展望：通过本次毕设项目，我们实现了一个基于微信小程序的小区管理系统，为小区居民提供了更加便捷、高效的服务。通过该系统的设计与实现，能够提高小区管理水平，提供更好的居住环境和服务。_ssm基于微信小程序的公寓生活管理系统

如何正确的使用Ubuntu以及安装常用的渗透工具集.-程序员宅基地

文章浏览阅读635次。文章来源i春秋入坑Ubuntu半年多了记得一开始学的时候基本一星期重装三四次=-= 尴尬了觉得自己差不多可以的时候就吧Windows10干掉了 c盘装Ubuntu 专心学习. 这里主要来说一下使用Ubuntu的正确姿势Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的开源GNU/Linux操作系统，Ubuntu 是基于DebianGNU/Linux，支..._ubuntu安装攻击工具包

JNI参数传递引用_jni引用byte[]-程序员宅基地

文章浏览阅读335次。需求：C++中将BYTE型数组传递给Java中，考虑到内存释放问题，未采用通过返回值进行数据传递。public class demoClass{public native boolean getData(byte[] tempData);}JNIEXPORT jboolean JNICALL Java_com_core_getData(JNIEnv *env, jobject thisObj, jbyteArray tempData){ //resultsize为s..._jni引用byte[]

三维重建工具——pclpy教程之点云分割_pclpy.pcl.pointcloud.pointxyzi转为numpy-程序员宅基地

文章浏览阅读2.1k次，点赞5次，收藏30次。本教程代码开源：GitHub 欢迎star文章目录一、平面模型分割1. 代码2. 说明3. 运行二、圆柱模型分割1. 代码2. 说明3. 运行三、欧几里得聚类提取1. 代码2. 说明3. 运行四、区域生长分割1. 代码2. 说明3. 运行五、基于最小切割的分割1. 代码2. 说明3. 运行六、使用 ProgressiveMorphologicalFilter 分割地面1. 代码2. 说明3. 运行一、平面模型分割在本教程中，我们将学习如何对一组点进行简单的平面分割，即找到支持平面模型的点云中的所有._pclpy.pcl.pointcloud.pointxyzi转为numpy

以NFS启动方式构建arm-linux仿真运行环境-程序员宅基地

文章浏览阅读141次。一其实在 skyeye 上移植 arm-linux 并非难事,网上也有不少资料, 只是大都遗漏细节, 以致细微之处卡壳，所以本文力求详实清析, 希望能对大家有点用处。本文旨在将 arm-linux 在 skyeye 上搭建起来，并在 arm-linux 上能成功 mount NFS 为目标, 最终我们能在 arm-linux 里运行我们自己的应用程序. 二安装 Sky..._nfs启动 arm

攻防世界 Pwn 进阶第二页_pwn snprintf-程序员宅基地

文章浏览阅读598次，点赞2次，收藏5次。00为了形成一个体系，想将前面学过的一些东西都拉来放在一起总结总结，方便学习，方便记忆。攻防世界 Pwn 新手攻防世界 Pwn 进阶第一页01 4-ReeHY-main-100超详细的wp1超详细的wp203 format2栈迁移的两种作用之一：栈溢出太小，进行栈迁移从而能够写入更多shellcode，进行更多操作。栈迁移一篇搞定有个陌生的函数。C 库函数 void *memcpy(void *str1, const void *str2, size_t n) 从存储区 str2 _pwn snprintf