iframe标签介绍

iframe 元素会创建包含另外一个文档的内联框架（类似行内元素inline-block）。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
常用属性：

属性	值	描述
src	URL	规定在 iframe 中显示的文档的 URL
frameborder	1（默认）或 0	规定是否显示框架周围的边框
scrolling	yes 或 no 或 auto（默认）	规定是否在 iframe 中显示滚动条

操作iframe

获取iframe中的内容

contentDocument：
contentDocument 属性以 HTML 对象返回框架容纳的文档。可以通过所有标准的 DOM 方法来处理被返回的对象。

语法：frameObject.contentDocument

获取iframe中的方法

contentWindow：
contentWindow属性是指指定的frame或者iframe所在的window对象
语法：frameObject.contentWindow

操作父容器

parent属性

返回父窗口。iframe页面通过window.parent属性操作父页面中的元素与方法

top属性

window.top 功能：返回顶层窗口，即浏览器窗口

iframe获取父容器的内容

parent.document

iframe获取父容器的方法

parent

加载

iframe加载完成

frameObject.onload = function() {}

iframe父容器加载完成

parent.onload = function () {}

示例

index.html

<!DOCTYPE html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>测试</title><style rel="stylesheet" type="text/css">* {margin: 0;padding: 0;}</style></head><body><div id="parentNode">parentNode</div><iframe class="childContent" id="childContent" frameborder="1"></iframe><script>// 在父容器window注册方法function sayParentNode () {console.log('sayParentNode')}// 获取iframe元素,加载内容const iframe = document.querySelector('#childContent')iframe.src = './iframe.html'// 等待iframe加载完成iframe.onload = function () {// 获取iframe内容及方法console.log('childContent', iframe.contentDocument)console.log('childContentNode', iframe.contentDocument.querySelector('#iframeNode'))console.log('childWindow', iframe.contentWindow)console.log('childWindowSay', iframe.contentWindow.sayIframeNode())}</script></body>
</html>

iframe.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style rel="stylesheet" type="text/css">* {margin: 0;padding: 0;}</style>
</head><body><div id="iframeNode">iframeNode</div>
</body>
<script>// 在iframe所在window注册方法function sayIframeNode() {console.log('sayIframeNode')}parent.onload = function () {console.log('parentSay', parent.sayParentNode())console.log('parentDocument', parent.document)}
</script></html>

使用iframe的优缺点

优点

程序调入静态页面比较方便

缺点

1.用在首页,对搜索引擎不友好影响网站排名。
2.创建DOM相对较慢。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
3.iframes 阻塞页面加载。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过 JavaScript 动态设置 iframe的src属性可以避免这种阻塞情况。
4. 占用唯一的连接池。浏览器只能开少量的连接到web服务器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 src属性。

iframe详细介绍相关推荐

html中的content作用,meta name= content=的作用详细介绍
meta name="" content="的作用详细介绍发布时间:2013-11-08 16:56:16 作者:佚名我要评论 meta name=" ...
html h1标签什么意思,什么是html h1标签？html h1标签使用方法的详细介绍
本篇文章主要为大家介绍了关于HTML h1~h6的使用介绍,介绍了关于html h1标签在网页中的两种使用方法,一个是网站首页的具体介绍,一个是文章内容页面的具体介绍,最后一点的总结,现在让我们看看这 ...
HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...
mysql为什么要压测_mysql集群压测的详细介绍
本篇文章给大家带来的内容是关于mysql集群压测的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通 ...
php比较运算符案列,PHP实例：PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
Tempdb数据库详细介绍
Tempdb数据库详细介绍一.Tempdb简介 tempdb是SQLServer的系统数据库一直都是SQLServer的重要组成部分,用来存储临时对象.可以简单理解tempdb是SQLServer的 ...
linux路由介绍,Linux的路由表详细介绍
Linux的路由表详细介绍一在Linux下执行route命令[root@localhost backup]# route -nKernel IP routing tableDestination ...
pythonexcel介绍_Python 中pandas.read_excel详细介绍
Python 中pandas.read_excel详细介绍 #coding:utf-8 import pandas as pd import numpy as np filefullpath = r& ...
渡神纪帧数测试软件,渡神纪芬尼斯崛起配置要求高吗渡神纪配置要求详细介绍_游侠网...
渡神纪芬尼斯崛起配置要求高吗?本作将在12月3日登陆主机和PC,很多玩家比较关心游戏的配置,这里给大家带来了渡神纪配置要求详细介绍,快来了解下吧. 渡神纪配置要求详细介绍最低要求(720p/30 f ...

iframe详细介绍