Web前后端数据交互技术 课件 第四章 画中画-iframe

——江西应用技术职业学院web前后端数据交互技术画中画——iframe第四章教学内容1、iframe简介2、iframe工作原理3、iframe节点操作4、iframe应用实例知识目标技能目标素养目标●掌握iframe的定义●理解iframe的工作原理●掌握Iframe节点的操作和应用●

能正确使用iframe标签和属性●能使用JS、Jquery获取、操作iframe节点●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点iframe的定义和使用、iframe节点基本操作、iframe应用案例教学难点iframe标签属性使用、iframe和JS、Jquery的综合应用教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院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:对iframe进行一些列限制，IE10+支持W3C手册参考：/tags/tag_iframe.asp标签属性谢谢大家观看——江西应用技术职业学院iframe异步通信4.2目录CONTENTSJquery操作iframe节点JS操作iframe节点iframe概述123iframe应用实例4简介——什么是iframe？iframe使用场景工作原理——iframe标签的属性和使用方法基本操作——iframe获取、iframe操作基本操作——iframe获取、iframe操作应用案例——iframe实现聊天室功能谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术iframe异步通信4.3.1目录CONTENTSJquery操作iframe节点JS操作iframe节点iframe概述123iframe应用实例4简介——什么是iframe？iframe使用场景工作原理——iframe标签的属性和使用方法基本操作——iframe获取、iframe操作基本操作——iframe获取、iframe操作应用案例——iframe实现聊天室功能02iframe获取、iframe操作JS操作iframe节点我们将使用JS来操作iframe节点，通过这个例子，展示使用过程。在网页上输入内容，单击“发送”按钮即可将内容输出到iframe中。任务描述使用JS操作iframe的过程分为两步：1.找到iframe<iframeid="fr1"style="height:300px;width:500px;"></iframe><br>document.getElementById('fr1').src=urlStr;2.操作iframedocument.getElementById('fr1').src=urlStr;案例分析谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术iframe异步通信4.3.2目录CONTENTSJquery操作iframe节点JS操作iframe节点iframe概述123iframe应用实例4简介——什么是iframe？iframe使用场景工作原理——iframe标签的属性和使用方法基本操作——iframe获取、iframe操作基本操作——iframe获取、iframe操作应用案例——iframe实现聊天室功能03iframe获取、iframe操作Jquery操作iframe节点我们将使用Jquery来操作iframe节点，通过这个例子，展示使用过程。在网页上输入内容，单击“发送”按钮即可将内容插入到服务器的数据库中，并在iframe中返回插入成功的条目数。任务描述使用Jquery操作iframe的过程也分为两步：1.找到iframe