HTML5 iFrame

最新推荐文章于 2025-06-30 13:23:59 发布
转载 最新推荐文章于 2025-06-30 13:23:59 发布 · 561 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/echo777/p/11068306.html
文章标签：

#javascript #ViewUI

博客介绍了iframe元素，它可创建包含另一文档的内联框架。还给出提示，可在标签间放置文本以应对不理解iframe的浏览器。此外，展示了在父HTML里操作iFrame的示例，以及如何改变src中HTML的属性。

　　

定义和用法

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

提示和注释：

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

属性

new : HTML5 中的新属性。

属性值描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdescURL规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheightpixels定义 iframe 的顶部和底部的边距。
marginwidthpixels定义 iframe 的左侧和右侧的边距。
nameframe_name规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。
seamlessseamless规定 <iframe> 看上去像是包含文档的一部分。
srcURL规定在 iframe 中显示的文档的 URL。
srcdocHTML_code规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
定义 iframe 的宽度。

 

关于怎样在父HTML里面操作iFrame。

比如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>

</script>
</head>
<body>

<input type='text' class='test'></input>
<iframe id="iframe" name="button-skin" src="/pages/console/system_report.html" ></iframe>
</body>
</html>

system_report.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>

</script>
</head>
<body>
<button class='button'>测试</button>
</body>
</html>

其中src里面又是一个HTML，那么 改变html的 属性呢。

$(window.frames['button-skin'].document).find('body')，这样是得到整个嵌套的html的 body。
$(window.frames['button-skin'].document).find('.button')这样可以操作button
但是一定要注意的是iframe里的html也有可能会加载延迟，这样的话就会得到
window.frames['button-skin']=undefined的错误。
怎样通过iframe里的属性改变父html的属性
$(window.parent.document).find（....）各种各样的操作。
$(window.parent.document).find（'.class'）.....

转载于:https://www.cnblogs.com/echo777/p/11068306.html

HTML5 ＜iframe＞ 标签、HTML5 ＜input＞ 标签
thgj0006的博客
04-12 1178
iframe> 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 标签规定了用户可以在其中输入数据的输入字段。 元素在 元素中使用，用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。
html5 iframe实现页面预览pdf
白白的博客
12-02 3437
一个可以把上传文件的绝对地址拿到的方法： //建立一个可存取到该file的url function getObjectURL(file) { var url = null; // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已 if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(fi
html5 div模仿iframe布局框架
03-04
使用div标签来给网页划分框架模板。这个框架可以嵌套在任何div标签内，或者iframe框架内
iframe使用实例
08-09
iframe使用实例，简单名了，演示iframe的基本功能
html5中的iframe
m0_73280507的博客
07-05 977
iframe>浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
HTML5——iframe标签
qq_45152044的博客
11-14 3583
iframe的作用是文档中的文档，或者浮动的框架(FRAME)。 iframe元素会创建包含另外一个文档的内联框架（即行内框架）。 即网页大体框架不变，但可以改变中间内容。 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
后台管理模板 HTML5 iframe200504.zip
09-13
【标题】"后台管理模板 HTML5 iframe200504.zip" 提供的是一个用于构建后台管理系统的设计模板，该模板基于HTML5技术，并且采用了iframe框架进行页面布局。iframe是一种在HTML文档中嵌入另一个HTML文档的技术，常...
深入剖析HTML5 内联框架iFrame
01-19
示例由index.html和iframe1.html、iframe2.html、iframe3.html组成 */ 先上一张效果图，图片后面是完整代码。 点击后 完整代码如下 index.html XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html ...
【高频考点精讲】HTML iframe的现代替代方案：为什么现在不推荐使用iframe了？
最新发布
全栈老李的博客
06-30 876
从iframe的兴衰史，我们可以看到Web开发理念的进化：从简单的"嵌入"思维，到如今的组件化、API驱动。作为现代前端工程师，理解这些演变背后的原因，比单纯记忆API更重要。我是全栈老李，下期我们聊聊《Web Components实战：如何打造企业级组件库》，不见不散！
HTML5中的iframe标签
qq_35892775的博客
09-24 5231
 iframe元素会创建包含另外一个文档的内联框架（即行内框架）。 src:src 属性规定在 iframe 中显示的文档的 URL; name:设置该iframe的名字； scrolling：scrolling属性规定是否在 iframe 中显示滚动条； frameborder：frameborder属性规定是否显示 iframe 周围的边框； srcdoc：srcdoc 属性规定页面...
html5 跨iframe的拖拽实现移动端页面设计器
08-07
NULL 博文链接：https://zhangzhaoaaa.iteye.com/blog/2117172
HTML 折叠框架 iframe
11-23
HTML 折叠框架 iframe 点击可收缩
HTML5-iframe内联框架、表单元素、功能组件
qq_61727355的博客
08-22 1322
在浏览器中按 F12 打开开发者工具，选择 Network，页面点击提交后会生成箭头所指的一条记录，点击该记录，在FormData处可看见提交信息。iframe标签与a标签的配合使用相当于a标签的target属性设为_self。3）与post 的对比：只需将上述代码的提交方式由get改为post即可。代码测试：只需在上述2中代码中添加几个元素即可。网页地址部分会附带提交的参数信息。src：引用页面地址。name：框架标识名。
HTML5-iframe-frameset
weixin_55062570的博客
07-19 330
html的页面内引入其他html页面
iframe内联元素有白边原因_深入解析HTML5 内联框架--iFrame（附代码）
weixin_39607837的博客
12-01 358
下面小编就为大家带来一篇深入剖析HTML5 内联框架iFrame。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦由于现在frame和frameset很少使用，已经过时了，已经被p+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地嵌套下去。程序猿的生活：前端只需要掌握这些，你也...
【Web前端】探索HTML中的“iframe”标签
一条晒干的咸鱼的博客
08-18 5064
现代网页开发中，​​​​ 标签是一个非常重要的工具。允许我们在一个网页中嵌入另一个网页，对于展示外部内容、应用嵌套或实现复杂的布局设计都非常有用。来一起探讨如何使用 ​​iframe​​ 标签，包括设置高度和宽度、移除边框，以及如何用 ​​iframe​​​ 来显示目标链接页面。
三分钟带你看完HTML5增强的【iframe元素】
热门推荐
湮顾千古的博客
04-29 1万+
HTML不再推荐页面中使用框架集，因此HTML5删除了&lt;frameset&gt;、&lt;frame&gt;和&lt;noframes&gt;这三个元素。不过HTML5还保留了&lt;iframe&gt;元素，该元素可以在普通的HTML页面中使用，生成一个行内框架，可以直接放在HTML页面的任意位置。除了指定id、class和style之外，还可以指定如下属性： src 指定一个UR...
iframe内联框架 html5
qq_41666208的博客
07-19 908
我们添加<a>标签可以实现另外一个页面的跳转，那么我们如何在本页面实现跳转呢？就要用到我们今天学习的<iframe>内联框架了。
HTML5---iframe内联框架
AO_AEO的博客
06-12 430
9.iframe内联框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--iframe内联框架 src:地址 w-h：宽度 高度 --> <iframe src="" name="Hello" frameborder
html5 iframe
09-08
HTML5中的iframe是一种内联框架元素，用于嵌入其他网页或文档到当前页面中。它允许在一个页面中显示另一个页面的内容，类似于将一个网页嵌套在另一个网页中。 使用iframe非常简单，只需在HTML中使用以下代码： ```html <iframe src="url" width="width" height="height"></iframe> ``` 其中，src属性指定要嵌入的页面的URL，width和height属性指定iframe的宽度和高度。 例如，要在当前页面中嵌入一个名为"example.html"的页面，可以使用以下代码： ```html <iframe src="example.html" width="500" height="300"></iframe> ``` 这将在当前页面中创建一个大小为500x300像素的iframe，并加载"example.html"页面的内容。 请注意，由于安全性考虑，某些网站可能会使用X-Frame-Options标头来阻止其内容被其他网站的iframe嵌入。因此，如果尝试嵌入这些网站的内容时遇到问题，请检查浏览器控制台以了解相关错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值