iframe基本用法

1、最基本的用法

iframe 标签指定 src

<iframe src="demo_iframe_sandbox.htm"></iframe>

2. 常用属性

(1). frameborder    是否显示边框,1代表显示,0代表不显示

(2). height, width    高度 、宽度

(3). name      框架的名字,可通过window.frames[name]被调用

(4). scrolling     框架是否滚动,yes no auto(需要时滚动)

(5). scr        内框架中文档的URL,可以是页面地址也可以是图片地址。

(6). sandbox        HTML5新特性,对iframe进行限制。IE10+支持。

(7). align        规定如何根据周围的元素来对齐<iframe> (left right top middle bottom)。

3、自适应 iframe

默认情况下,iframe会自带滚动条,不会全屏.如果你想自适应iframe的话:

第一步:去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步,设置iframe的高为body的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

另外,还可以添加其它的装饰属性:

allowtransparency    是否允许iframe设置为透明(true /false),默认为false

allowfullscreen       是否允许iframe全屏(true /false),默认为false

<iframe id="google_ads_frame2" name="google_ads_frame2" width="" height="" frameborder=""src="target.html" marginwidth="" marginheight="" vspace="" hspace="" allowtransparency="true"scrolling="no" allowfullscreen="true"></iframe>

获取iframe里的内容

1、主要的两个API contentWindow,contentDocument

iframe.contentWindow,   获取 iframe 的 window 对象

iframe.contentDocument,  获取 iframe 的 document 对象

这两个 API 只是 DOM 节点提供的方式( 即 getELement 系列对象 )

var iframe = document.getElementById('demo');
var iwindow = iframe.contentWindow; // 获取iframe的window对象
var idoc = iframe.contentDocument; // 获取iframe的document对象

2、通过 iframe 的 name 属性 调用 iframe。

刚刚我们提到了,我们也可以通过window.frames[iframeName]来调用

window.frames[iframeName]

let iframe = window.frames['demo']

返回的就是window对象

在iframe中获取父级内容

1、在同域下,父页面可以获取子 iframe 的内容,子 iframe 同样也能操作父页面内容

window.parent   获取上一级的window对象,如果还是iframe则是该iframe的window对象
window.top    获取最顶级容器的window对象,即,就是你打开页面的文档
window.self    返回自身window的引用。可以理解 window===window.self

2、跨域通讯之 postMessage

postMessage ( message, targetOrigin ):

message:     就是传递给iframe的内容, 通常是string,

targetOrigin:    接受你传递消息的域名,可以设置绝对路径,也可以设置 "或者 "/" 。 表示任意域名都行,"/" 表示只能传递给同域域名

postMessage 是 html5 的新特性 具体介绍请查看 MDN postMessage

我们可以通过html5这个新特性进行iframe间的跨域通信,使用 postMessage 进行数据传递,通过 Message 监听通信事件

postMessage挂载到window对象上,即,使用window.postmessage() 调用.

<iframe src="http://tuhao.com" name="sendMessage"></iframe>
//页面A
let ifr = window.frames['sendMessage'];
//使用iframe的window向iframe发送message。
ifr.postmessage('hello I'm a ', "http://tuhao.com");
//页面B 监听 message 事件
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.origin == 'http://tuhao.com') {
if (e.data == 'give u a message') {
e.source.postMessage('hello I'm b', e.origin); //向原网页返回信息
} else {
alert(e.data);
}
}
}

当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性,data,origin,source.

data:    postMessage传递进来的值
origin:  发送消息的文档所在的域
source:  发送消息文档的window对象的代理,如果是来自同一个域,则该对象就是window,可以使用其所有方法,如果是不同的域,则window只能调用postMessage()方法返回信息

iframe 的安全问题

iframe出现安全性有两个方面,一个是你的网页被别人 iframe,一个是你 iframe 别人的网页。

1、防嵌套网页

拦截 click 事件。iframe 享有着 click 的最优先权,当有人在伪造的主页中进行点击的话,如果点在iframe上,则会默认是在操作 iframe 的页面。

(1)在前端领域,我们可以通过window.top来防止我们页面被嵌套。

//iframe2.html
if(window != window.top){
window.top.location.href = correctURL;
}

(2)通过window.location.host来检测是否跨域了,限定你的网页不能嵌套在任意网页内。如果你想引用同域的框架的话,可以判断域名。

if (top.location.host != window.location.host) {
  top.location.href = window.location.href;
}

当然,如果你网页不同域名的话,上述就会报错。
所以,这里可以使用try...catch...进行错误捕获。如果发生错误,则说明不同域,表示你的页面被盗用了。这时候再进行跳转即可.

try{
  top.location.hostname; //检测是否出错
  //如果没有出错,则降级处理
  if (top.location.hostname != window.location.hostname) {
    top.location.href =window.location.href;
  }
}
catch(e){
  top.location.href = window.location.href;
}

(3)在服务器上,对使用iframe的权限进行设置

X-Frame-Options

X-Frame-Options是一个响应头,主要是描述服务器的网页资源的 iframe 权限。目前的支持度是IE8+有3个选项:

DENY:      当前页面不能被嵌套 iframe 里,即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套 iframe
SAMEORIGIN:  iframe 页面的地址只能为同源域名下的页面
ALLOW-FROM:  可以在指定的 origin url 的 iframe 中加载

实例:

X-Frame-Options: DENY
拒绝任何iframe的嵌套请求 X-Frame-Options: SAMEORIGIN
只允许同源请求,例如网页为 foo.com/.php,則 foo.com 底下的所有网页可以嵌入此网页,但是 foo.com 以外的网页不能嵌入 X-Frame-Options: ALLOW-FROM http://s3131212.com
只允许指定网页的iframe请求,不过兼容性较差Chrome不支持

Web前端之【 iframe 】的更多相关文章

  1. Web前端之iframe详解

    iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm" ...

  2. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  3. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  4. Web前端上万字的知识总结

    下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习.大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每个字都是自己手敲的. 1.<html ...

  5. web前端基础知识总结

    上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 ...

  6. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  7. web前端性能优化指南(转)

    web前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络 ...

  8. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  9. Web前端开发工程师面试题

    Web前端开发工程师面试题1.说说css的优先级?2.在移动端中,常常使用tap作为点击事件,好处是?会带来什么问题?3.原生JS的window,onload与Jquery的$(document).r ...

  10. web前端-面试经验总结

    这几次面试主要是冲着百度去的 面试1的主要问题: 笔试: 1.解释css盒子模型 2.常用选择器,以及优先级 3.B如何继承A 4.写一个闭包实例,有什么优点缺点 5.html5的心特性有哪些 6. ...

随机推荐

  1. 【转】京东金融App端链路服务端全链路压测策略

    京东金融移动端全链路压测历时三个月,测试和服务端同学经过无数日日夜夜,通宵达旦,终于完成了移动端链路的测试任务.整个测试有部分涉及到公司敏感数据,本文只对策略部分进行论述. 1.系统架构与策略 在聊性 ...

  2. iOS开发 判定某个时间是否属于这个时间段

    - (BOOL)isBetweenDate { //设置的是中国时间 NSString *startTime=@"13:01"; NSString *expireTime=@&qu ...

  3. pan wutong团队隐私协议

    本隐私权政策详细说明了pan wutong团队(“我们”或“我们的”)通过我们的应用程序和网站收集的信息,以及我们将如何使用这些信息. 1.我们不会通过我们的应用程序或网站收集儿童的个人信息. 我们深 ...

  4. Flask 学习(一)简单介绍

    Flask介绍(轻量级的框架) Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收ht ...

  5. Maya+VS编程入门初体验(HelloWorld)

    Maya2018 + VS2017 环境搭建见 博客 1. 项目: VS 新建了一个 MEL Command类型的项目(MayaProject) 2. HelloWorld代码 #include< ...

  6. elastalert 用import属性来组织,引入配置

    对应rule的一些公用规则,可以放到一个或者多个头文件中.主的rule yaml文件引入即可.文件名随意,最好别用yaml后缀,要不会被当做一个rule.另外import在rule文件中只能出现一次. ...

  7. [数据结构 - 第6章] 树之二叉排序树(C语言实现)

    一.什么是二叉排序树? 对于普通的顺序存储来说,插入.删除操作很简便,效率高:而这样的表由于无序造成查找的效率很低. 对于有序线性表来说(顺序存储的),查找可用折半.插值.斐波那契等查找算法实现,效率 ...

  8. hive 字符串截取

    语法 :substr(字段,starindex,len)  下标从 1 开始 测试 ,) from siebel_cx_order limit ; -- -- -- -- -- -- -- -- -- ...

  9. (转)Intellij IDEA 2017 debug断点调试技巧与总结详解篇

    背景:详细介绍idea的debug调试过程 Intellij IDEA 2017 debug断点调试技巧与总结详解篇

  10. 《ucore lab1 exercise5》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:实现函数调用堆栈跟踪函数 我们需要在lab1中完成kdebug.c中函数print_stackframe的实现,可以通过函数print_s ...