frame的用法
<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的用法的更多相关文章
- wxAui Frame Management用法
wxAui Frame Management用法:1. 总体步骤# 安装wxpython2.8.*.*后import wx.aui# 初始化一个wxAui管理框架对象mgr = wx.aui.AuiM ...
- 从零开始系列-R语言基础学习笔记之二 数据结构（二）
在上一篇中我们一起学习了R语言的数据结构第一部分:向量.数组和矩阵,这次我们开始学习R语言的数据结构第二部分:数据框.因子和列表. 一.数据框 类似于二维数组,但不同的列可以有不同的数据类型(每一列内 ...
- NYTimes Objective-C 编程风格指南
转自eseedo的博客 [微博] NYTimes Objective-C 编程风格指南.来源:https://github.com/NYTimes/objective-c-style-guide ...
- Html标记语言学习一2017年6月12日
今天主要学习了 frame的用法. <frameset> 可以将网页分成几个不同的部分 使用 cols 和 rows 两种标记.前者是列,后者是行 <frame/> 单标 ...
- python3+selenium常用语法汇总
Selenium常用语法总结 一.Selenium常用定位语法 1.元素定位 (1)ID定位元素: find_element_by_id(‘’) (2)通过元素的类名称定位元素: find_eleme ...
- iMacros 入门教程-基础函数介绍（2）
imacros 的 pos 参数是什么意思 position的缩写,如果有 2 个以上的元素共用完全相同的属性(比方说同一个小区的同一栋楼),这个 POS 的参数可以借由不同位置来帮助明确定位(也就是 ...
- web自动化 -- 切换 iframe
先看源码 switch_to_frame() frame() 具体用法
- UI中 frame 与 transform的用法与总结
在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...
- frame与iframe的区别及基本用法
frame 和 iframe 的区别 1.frame 不能脱离 frameset 单独使用,iframe 可以: 2.frame 不能放到body中,否则将无法显示: 3.iframe 也可以嵌套在f ...
随机推荐
- js 设备判断（移动端pc端 安卓ios 微信）
苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...
- lsof -i
https://www.cnblogs.com/sparkbj/p/7161669.html 主要命令
- C++ shared_ptr、unique_ptr、weak_ptr
shared_ptr unique_ptr weak_ptr 内存泄漏 智能指针 引用计数 循环引用 reset
- 聊聊基准测试的MVP方案
上篇博客介绍了基准测试的一些思路和方法策略,这篇博客,聊聊基准测试的MVP(最小可行性方案)... 思维导图 一.测试策略 策略名称 阈值 运行时间 性能指标 基线 注释 并发测试 CPU75%+Er ...
- Elastic Stack-Elasticsearch介绍
一.前言 前篇写了好像没有多少人去看,但是还是要继续,我猜想可能是很多人接触的这块比较少吧,Elasticsearch这块有很多要说的,开始吧. 二.数据库.Elasticsearch选择 ...
- git命令行 整理（一位大神给我的私藏）
Evernote Export Git 是一个很强大的分布式版本控制系统.它不但适用于管理大型开源软件的源代码,管理私人的文档和源代码也有很多优势. Git常用操作命令: 1) 远程仓库相关命令 检出 ...
- vue mock自己总结
cli安装mock模块 npm install mockjs 创建mock文件夹 配置及创建文件 当后端写好真实接口以后,我们只需删掉创建的mock.js文件和在main.js中导入假数据的那行 ...
- jsp篇 之 基本概念
Jsp概念: 1.jsp是什么 jsp全称Java Server Pages,是一种[动态网页开发技术]. .html文件是静态页面 .jsp 文件是动态页面 jsp页面允许我们在html代码中[嵌入 ...
- [模板] 杜教筛 && bzoj3944-Sum
杜教筛 浅谈一类积性函数的前缀和 - skywalkert's space - CSDN博客 杜教筛可以在\(O(n^{\frac 23})\)的时间复杂度内利用卷积求出一些积性函数的前缀和. 算法 ...
- 【深入Java虚拟机】之三：内存溢出
为了更直接的了解各区域,下面我们来看几个示例. 1.Java 堆溢出 下面的程中我们限制Java 堆的大小为20MB,不可扩展(将堆的最小值-Xms 参 数与最大值-Xmx 参数设置为一样即可避免堆自 ...