王志勇 发表于 2018年10月13日 08:59
调试中,例如一个<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()函数来调用远程数据,这样不但能跨越站点,还能跨越不同的域名。
上述提到的非刷新的交互方式,下列举一个小的细节实例。因为AJAX无法POST,所以这里我使用开发中自己无意中发现的iframe的方式。
置顶的文章:
超低价享受i7-7700的体验
https速度测试(可下载精确测试工具)
家用电脑理性优化升级天梯图之2026
服务器版Linux系统的选择之2026
秒会+实战PHP程序设计培训(2)
如何快速自制CPU天梯图?
https安全吗?
独立博客有必要安装https吗?
近期的主题:
人生讨论(26):为什么很多人成功后很少发声?
数码评测(72):多核CPU选择之新发现
学习粤语的核心难度
通过.hk域名看当今两地互联网
Webshu一定会重新改版
数码评测(71):超低价享受i7-7700的体验
回顾2009年时的第一个完成的PHP项目
https利弊(1):https速度测试(可下载精确测试工具)
误操作导致部分数据丢失
夜晚靓歌(13):SNH48做客广州电台
人生讨论(25):永远不能出口的话
数码评测(70):测试继电器的接触电阻
数码评测(69):家用电脑理性优化升级天梯图之2026
数码评测(68):组装高速U盘/移动硬盘
真玄学心得(23):再生人与我们的关联
服务器版Linux系统的选择之2026
真玄学心得(22):未来人信息新解
数码评测(65-2):再谈自制CPU天梯图
夜晚靓歌(12):于文文现场solo
夜晚靓歌(11):女声版《直到世界的尽头》
版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。
与此相关的链接
自由勇专栏
Blog存档 Archives
2025年-2026年03月(10)
2024年(13)
2023年 +