<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. C语言的3种参数传递方式

    参数传递,是在程序运行过程中,实际参数就会将参数值传递给相应的形式参数,然后在函数中实现对数据处理和返回的过程,方法有3种方式 值传递 地址传递 引用传递 tips: 被调用函数的形参只有函数被调用时 ...

  2. L2-4 部落 (25 分)

    在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不同的朋友圈.我们认为朋友的朋友都算在一个部落里,于是要请你统计一下,在一个给定社区中,到底有多少个互不相交的部落?并且检查任意两个人是否属于同 ...

  3. Jmeter常见问题(转)

    收集工作中JMeter遇到的各种问题   1.  JMeter的工作原理是什么? 向服务器提交请求:从服务器取回请求返回的结果.   2.  JMeter的作用? JMeter可以用于测试静态或者动态 ...

  4. setData优化过程

    https://blog.csdn.net/rolan1993/article/details/88106343 在做一个小球跟随手指移动的效果时候,由于在touchmove事件中频繁调用setDat ...

  5. 记一次innobackupex备份恢复数据库过程

    简介:以前备份都是通过mysqldump备份数据库的,由于是逻辑备份,所以采用这种备份方式数据是很安全的,跨平台.版本都很容易.凡事有利必有弊,逻辑备份在你数据库比较大时,备份.恢复数据所耗费的时间也 ...

  6. Python——匿名函数

    一.定义: 是指一类无需定义标识符(函数名)的函数或子程序 二.语法格式: lambda 参数:表达式 三.注意事项: lambda 函数可以接收任意多个参数 (包括可选参数) 并且返回单个表达式的值 ...

  7. bzoj3277-串

    Code #include<cstdio> #include<iostream> #include<cmath> #include<cstring> # ...

  8. 【XSY2962】作业 数学

    题目描述 有一个递推式: \[ \begin{align} f_0&=1-\frac{1}{e}\\ f_n&=1-nf_{i-1} \end{align} \] 求 \(f_n\) ...

  9. Luogu P4643 【模板】动态dp

    题目链接 Luogu P4643 题解 猫锟在WC2018讲的黑科技--动态DP,就是一个画风正常的DP问题再加上一个动态修改操作,就像这道题一样.(这道题也是PPT中的例题) 动态DP的一个套路是把 ...

  10. dajngo cache,throttling

    缓存 背景介绍: 动态网站的问题就在于它是动态的. 也就是说每次用户访问一个页面,服务器要执行数据库查询,启动模板,执行业务逻辑以及最终生成一个你所看到的网页,这一切都是动态即时生成的. 从处理器资源 ...