Web前后端数据交互技术 课件 1.2.2 Iframe

——江西应用技术职业学院web前后端数据交互技术Iframe1.2.2目录CONTENTS什么是Iframe1Iframe能做什么2Iframe异步通信实现原理301什么是Iframe1.2.2

Iframe1、iframe是HTML中的一个标签。2、网页内框架，被称为“网页中的网页”。3、iframe支持HTML中的全局属性和事件。4、兼容性说明。所有浏览器都支持<iframe>标签。HTML4.1StrictDTDXHTML1.0StrictDTD不支持iframe元素。Iframe的定义1.2.2

Iframe02Iframe的作用Iframe的作用异步方式就是在点击发送数据的时候并没有刷新整个页面，而是借助于iframe标签实现了页面的异步刷新。当然，我们也可以点击发送的时候向服务器发送数据，并借助iframe实现异步刷新。Iframe的作用我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。03Iframe异步通信实现原理1.2.2

IframeIIframe异步通信实现原理一般情况下都是用在同一域下的Ajax请求；但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请求，利用iframe完成Ajax的跨域请求IIframe异步通信实现原理要实现域的request.html请求域的process.php，可以将请求的参数通过URL传给response.html，由response.html向process.php发出真正的Ajax请求（response.html与process.php都属于域），然后将返回的结果通过URL传给proxy.html，最后由于proxy.html与request.html是在同一域下，所以可以在proxy.html利用window.top将结果返回给request.html完成跨域通信。IIframe异步通信实现原理1、先来看request.html。这个页面其实就是要告诉response.html：我要让你执行你定义好的方法GetPerson，并且要用我给你的参数'{"id":24}'。可能感到模糊的就是为什么要把CallBack函数传给response.html，这是定义在本页面上的方法，response.html也不能执行它；看接下来的代码就会知道：response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html，而proxy.html拿到了CallBack这个方法名就可以执行了，因为proxy.html和request.html是同域的。IIframe异步通信实现原理2、接下来我们看response.html，这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的Ajax请求，然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。IIframe异步通信实现原理

3、接下来看一下process.php的代码4、最后就是proxy.html，proxy拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据，利用window.top执行request.html里定义的回调函数。实际应用中，prox