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

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

iframe 如何使用呢？

通常我们使用iframe直接在页面嵌套iframe标签指定的src就可以了。

比如：

<!--

        <iframe> 标签规定一个内联框架

　　　　　这里写p 标签是为了看align的效果

     -->

     <p style="overflow: hidden;">这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。

         <iframe name="myiframe" id="myrame" src="external_file.html" frameborder="0" align="left" width="200" height="200" scrolling="no">

            <p>你的浏览器不支持iframe标签</p>

        </iframe>

     这是一些文本。 这是一些文本。 这是一些文本。这是一些文本。 这是一些文本。 这是一些文本。</p>

　　

iframe 的常用属性：

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

上面代码中 iframe的src属性为自己本地的一个html页面

代码如下：

<body>

    <div id="div" style="height: 300px; background: #ddd;">这是一个外部文件里面的内容</div>

</body>

<script>

    var div = document.getElementById("div");

    console.log(div);

</script>

　　

有什么交互的部分也是写到这个页面中，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);

　　

但是，这里面是获取不到里面的DOM的，可以在URL中获取（也就是引入的html文件）

iframe 的优缺点

优点：

　　重载页面时不需要重载整个页面，只需要重载页面中的一个框架页（减少数据的传输，减少网页的加载时间）；

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

　　方便开发，减少代码的重复率（比如页面的header，footer）；

缺点：

　　会产生很多的页面，不易于管理；

　　不易打印；

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

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

　　由于诸多的缺点，不符合标准网页设计的理念，已经被抛弃，目前的HTML5不再支持此标签。

查看 frame 的基本用法

frame的用法的更多相关文章

  1. wxAui Frame Management用法

    wxAui Frame Management用法:1. 总体步骤# 安装wxpython2.8.*.*后import wx.aui# 初始化一个wxAui管理框架对象mgr = wx.aui.AuiM ...

  2. 从零开始系列-R语言基础学习笔记之二 数据结构（二）

    在上一篇中我们一起学习了R语言的数据结构第一部分:向量.数组和矩阵,这次我们开始学习R语言的数据结构第二部分:数据框.因子和列表. 一.数据框 类似于二维数组,但不同的列可以有不同的数据类型(每一列内 ...

  3. NYTimes Objective-C 编程风格指南

    转自eseedo的博客   [微博] NYTimes Objective-C 编程风格指南.来源:https://github.com/NYTimes/objective-c-style-guide ...

  4. Html标记语言学习一2017年6月12日

    今天主要学习了 frame的用法. <frameset> 可以将网页分成几个不同的部分 使用 cols  和  rows 两种标记.前者是列,后者是行 <frame/>  单标 ...

  5. python3+selenium常用语法汇总

    Selenium常用语法总结 一.Selenium常用定位语法 1.元素定位 (1)ID定位元素: find_element_by_id(‘’) (2)通过元素的类名称定位元素: find_eleme ...

  6. iMacros 入门教程-基础函数介绍（2）

    imacros 的 pos 参数是什么意思 position的缩写,如果有 2 个以上的元素共用完全相同的属性(比方说同一个小区的同一栋楼),这个 POS 的参数可以借由不同位置来帮助明确定位(也就是 ...

  7. web自动化 -- 切换 iframe

    先看源码 switch_to_frame() frame() 具体用法

  8. UI中 frame 与 transform的用法与总结

    在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...

  9. frame与iframe的区别及基本用法

    frame 和 iframe 的区别 1.frame 不能脱离 frameset 单独使用,iframe 可以: 2.frame 不能放到body中,否则将无法显示: 3.iframe 也可以嵌套在f ...

随机推荐

  1. xcrun: error: unable to find utility "PackageApplication", not a developer tool or in PATH ​

    xcrun: error: unable to find utility "PackageApplication", not a developer tool or in PATH ...

  2. C# — Windows服务安装后自动停止问题

    今天在使用VS创建一个Windows服务时,为了得到一些提示,引用了Windows.Forms程序集,然后使用MessageBox.Show()方法渴望得到一些弹窗提示: 但是最后在安装好服务后,在任 ...

  3. C#中指针使用总结（转载）

    C#为了类型安全,默认并不支持指针.但是也并不是说C#不支持指针,我们可以使用unsafe关键词,开启不安全代码(unsafe code)开发模式.在不安全模式下,我们可以直接操作内存,这样就可以使用 ...

  4. ELement-UI之树形表格（treeTable&&treeGrid）

    先上图来一波 支持无限层级,支持新增子级时自动打开父级,支持编辑时自动打开父级,执行操作时自带动画效果,支持初始化时设置全部打开或者关闭,支持一键展开与关闭丝滑般的无延迟 由于基于el-table扩展 ...

  5. Lepus搭建企业级数据库慢查询分析平台

    前言 Lepus的慢查询分析平台是独立于监控系统的模块,该功能需要使用percona-toolkit工具来采集和记录慢查询日志,并且需要部署一个我们提供的shell脚本来进行数据采集.该脚本会自动开启 ...

  6. RuntimeError: An attempt has been made to start a new process before the current process has finished its bootstrapping phase. This probably means that you are not using fork to start your c

    Error Msg: Traceback (most recent call last): File "<string>", line 1, in <module ...

  7. flask(一)之路由和视图

    01-介绍 Flask 是一个 Python 实现的 Web 开发微框架,同时具有很强的扩展能力. 02-第一个flask程序 # 初始化 from flask import Flask, url_f ...

  8. 微信小程序手机预览请求不到数据（最后一条不明所以）

    本地开发调试小程序时,用手机预览需要有如下设置:1.微信开发者工具中设置:不校验安全域名.web-view 域名.TLS 版本以及 HTTPS 证书.这样在有网络请求的时候,就可以访问本地的服务器了, ...

  9. U盘安装CentOS系统、raid5制作以及nohup的使用

    最近折腾服务器,用U盘安装了系统,总结了一些避坑措施: 下载UltraISO工具,用来刻盘 从centos官网下载ISO镜像,然后刻盘 关键是在你进入系统安装界面后,如下: 选中第一项,按tab键(看 ...

  10. BZOJ 3653: 谈笑风生（离线, 长链剖分, 后缀和）

    题意 给你一颗有 \(n\) 个点并且以 \(1\) 为根的树.共有 \(q\) 次询问,每次询问两个参数 \(p, k\) .询问有多少对点 \((p, a, b)\) 满足 \(p,a,b\) 为 ...