底层技术分享:iframe+innerHTML VS AJAX

王志勇 发表于 2018年10月13日 08:59

AJAX大约是13年前诞生的技术,它能实现网页不用刷新的交互功能,对于现在来说还是很重要的新技术。我从去年开始做webapp,需要用到一些不用刷新的交互页面。

调试中,例如一个<form>的表单,让它的target指向一个iframe,即<form method='post' action='abc'>……</form>。iframe的名称为abc,即<iframe name='abc'>……<iframe>

同时,将<iframe>用display来隐藏,使其不可见,如<iframe name='abc' style='display:none'>,或者用一个DIV来隐藏iframe。

这样,提交表单后,网页可以不刷新,这种效果很像现在的手机APP,也像AJAX。前段时间在网上查询有没有人用这种技术,其实早在AJAX出来的几年前,就有一少部分人用iframe来实现这种功能。因此,iframe的这种功能,在2000年的时候的浏览器都可以支持,只是后来的人由于功能的需要,才会在无意间发现iframe的强大之处。

父页面,需要在不用刷新的情况下,自动更新的区域,设置一个id,如<div id='aa1'></div>。iframe包含的网页里,将要传给父页面的数据,使用innerHTML的方式,写法是<script>top.aa1.innerHTML='……';</script>

这种写法,在火狐下很可能会无法显示,正确写法改为:
<script>top.document.all.aa1.innerHTML='……';</script>

几乎AJAX使用的大多数场景,都可以用iframe+innerHTML代替,效果完全一样,我在很多台手机中调试过,都能正常运行,手机浏览器都支持iframe。
有人说AJAX调试相对更简单,但我个人感觉iframe+innerHTML调试相对更简单,兼容的浏览器更广。iframe还有一个AJAX无可比拟的优势,iframe可以实现表单的post,而AJAX不能post。

调试中,iframe调用的页面,如果跨越了站点(同一域名下的二级域名),则无法使用top.document.all.cr1.innerHTML。解决的办法是,iframe调用的页面为同一网站内的页面,这个页面用file_get_contents()函数来调用远程数据,这样不但能跨越站点,还能跨越不同的域名

0条评论:
1   自由勇 2019-02-23 22:38
Trackback来自《Eonval项目开发进度(3):太意外的执行力(多截图)

上述提到的非刷新的交互方式,下列举一个小的细节实例。因为AJAX无法POST,所以这里我使用开发中自己无意中发现的iframe的方式。

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (44周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2022年07月
2022年06月(15)
2022年05月(20)
2022年04月(16)
2022年03月(9)
2022年02月(9)
2022年01月(10)
2021年 +

2020年 +
2019年 +
2018年 +
2016年-2017年(9)
2014年06月-09月(10)
2013年 +
2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2024 auiou.com All rights reserved.
此Blog程序由王志勇编写