• 用iframe进行表单提交时的若干问题总结


    这篇文章主要用来探讨在使用iframe进行表单提交时一系列浏览器兼容性以及iframe本身的一些限制。

    iframe的主要用途一般是运用在无刷新提交数据并做出响应的场景,可以作为ajax方式的有力补充。相对于使用ajax提交数据有一些独特的优势:
    1、对浏览器是否支持javascript没有要求,因而有更好的浏览型兼容性。
    2、表单提交时和普通的页面提交没有差别,不用通过脚本来包装提交的数据。
    3、能很方便地处理enctype="multipart/form-data"的提交表单,而这是通过ajax所不能做到的。因此在像上传图像而要不刷新当前页面时,一般都会采用iframe来处理表单。

    不过,应用iframe来处理表单也还是需要应对一些ajax处理表单时所没有的问题。把这些问题解决了,应用iframe就是手到擒来的事情了。

    1、如何设定保证表单提交给iframe
    只需要将form的target指定为iframe的name即可,这个在各个浏览器里边都是兼容的,不用额外的指定iframe的id了。
    如:
    ########container.htm
    <iframe name="frm_dealer"></iframe>
    <form action="iframe.htm" target="frm_dealer">
        <input type="submit" value="提交">
    </form>
    ###########iframe.htm
    Hello,World!

    2、表单提交后如何用js获取iframe的页面内容
    这是和ajax如何获取到响应的数据一个类似的问题,需要处理好各种浏览器的兼容性。通过对一些日常开发的对比,总结出这么一套模式来获取iframe页面的内容,屡试不爽:
    给iframe定义一个onload事件,并且将iframe以this传进相应的处理函数,然后就可以通过其contentWindow.document属性获取到iframe的document了。接下来用document.body.innerHTML就可以获取到body中的html代码了。这里需要考虑的一个问题是,页面加载时iframe没有src时也会产生onload事件,这时需要检查其innerHTML是否为空,如果为空,则不进行任何处理。

    将1中的container.htm改成如下:
    <iframe name="frm_dealer" onload="onIFrameLoaded(this);"></iframe>

    <form action="iframe.htm" target="frm_dealer">
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript">
    function onIFrameLoaded(iframe) {
        var doc = iframe.contentWindow.document;
        var html = doc.body.innerHTML;
        if (html != '') {
            alert(html);
        }
    }
    </script>

    3、如何使嵌入iframe的页面自适应iframe的高度变化
    通过iframe的document的body.scrollHeight属性即可获知iframe文档的高度,然后调整iframe的height即可,可以通过修改2中的代码看到效果:
    在conatiner.htm中的onIFrameLoaded函数最后增加一行:iframe.style.height = doc.body.scrollHeight + 'px';
    然后,修改iframe.htm为:
    <div style="height:200px">Hello,World!</div>
    点击container.htm中的按钮,就会看到iframe的高度自动变到200px了。

    四、iframe里边的表单提交的设置问题
    当iframe里边有表单需要提交时,如果需要其父窗口一起提交,则需要设置其表单的target属性为_top。

    五、iframe的缓存问题
    当iframe里边的页面是一个静态页面时,其缓存往往比较严重,比如conatiner.htm的代码为:
    <iframe src="iframe.htm"></iframe>
    如果iframe.htm为一个静态页面,那么当改变了iframe.htm的页面内容,无论如何刷新container.htm,都有可能出现iframe.htm不发生改变的情况。只有单独访问iframe.htm,并且强制刷新一下,才会使得container.htm页面iframe里边的内容也发生变化。如果是在这样的情况下发布了一个网站的新版后,用户们却丝毫看不到改变,那么抓狂的只能是开发者了。不过,其实也不用着急,在src里边的路径后边加一个版本标识符即可,比如将src改成iframe.htm?v=1,这样,浏览器自然回去获取最新的版本内容了。

    基本上,iframe里边需要注意的就是这些了,不知道你还有没有补充呢?

  • 相关阅读:
    HDU 5302(Connect the Graph- 构造)
    Redis 集群
    HDFS集中式缓存管理(Centralized Cache Management)
    JavaScript语言基础12
    【IOS】启动画面
    小贝_mysql优化学习
    hdu2099 整除的位数(暴力)
    Receiver type ‘X’ for instance message is a forward declaration
    动态游标(比如表名作为參数)以及动态SQL分析
    mongodb与SQL相应关系表
  • 原文地址:https://www.cnblogs.com/geek/p/1411732.html
Copyright © 2020-2023  润新知