Web前后端数据交互技术 课件 4.1iframe简介

iframe异步通信4.1目录CONTENTSjquery操作iframe节点JS操作iframe节点iframe概述123iframe应用实例4简介——什么是iframe？iframe使用场景工作原理——iframe标签的属性和使用方法基本操作——iframe获取、iframe操作基本操作——iframe获取、iframe操作应用案例——iframe实现聊天室功能01什么是iframe？iframe概述1、iframe是HTML中的一个标签。2、网页内框架，被称为“网页中的网页”。3、iframe支持HTML中的全局属性和事件。4、兼容性说明。所有浏览器都支持<iframe>标签。HTML4.1StrictDTDXHTML1.0StrictDTD不支持iframe元素。内涵在前端开发中，iframe作为一个很经典且友好（浏览器兼容性非常好）的标签，它的典型应用场景有很多。由于<iframe>提供了一个和浏览器当前窗口相隔离的沙箱环境，相当于网页内部新开的另一个窗口。<iframe>外部的css/javascript，不会影响到<iframe>里面的样式或DOM。同时，<iframe>内部的css/javascript也不会影响<iframe>外部的样式和DOM。因此，iframe可以用于引用站外的网页。常用于CMS系统，富文本编辑器等场景。我们常用的在线执行前端代码的网站，例如新手常用的w3school中文官网，/里面的“尝试一下”功能，其实都是使用了<iframe>标签来实现。由于iframe的隔离性，你不管提交什么代码，都只能影响到iframe里面的区域，不会影响到页面上其他部分。使用场景另外，网站中的广告引入也用到了iframe。通常的做法就是使用iframe，引入广告地址就可以了，然后根据广告内容设置相应的显示框。但是，为什么是使用iframe来进行设置，而不是在某个div下嵌套就行了呢？要知道，广告是与原文无关的，这样硬编码进去，会造成网页布局的紊乱,而且,这样势必需要引入额外的css和js文件，极大的降低了网页的安全性。这些所有的弊端，都可以使用iframe进行解决。我们通常可以将iframe理解为一个沙盒，里面的内容能够被topwindow完全控制，而且，主页的css样式是不会入侵iframe里面的样式，这些都给iframe的广告命运埋下伏笔。但默认情况下，iframe是不适合用做展示信息的，所以我们需要对其进行样式修饰。使用场景1.frameborder:是否显示边框，1(yes),0(no)2.height:框架作为一个普通元素的高度，建议在使用css设置。3.width:框架作为一个普通元素的宽度，建议使用css设置。4.name:框架的名称，用于在JS中引用元素，或者作为链接的目标。5.scrolling:框架的是否滚动。yes,no,auto。6.src：内框架的地址，规定在iframe中显示的文档的URL。7.marginheight

：定义iframe的顶部和底部的边距。

marginwidth：定义iframe的左侧和右侧的边距。8.sandbox:对i