`
mutongwu
  • 浏览: 449856 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

表单提交至iframe

阅读更多
.......
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
........
<form id="fabokeForm" method="GET" action="json.asp" accept-charset="GBK" target="hiddenIframe">
..... ......
</form>
<iframe  id="hiddenIframe" name="hiddenIframe" width=0 height=0 style="display:none" frameborder=0 src="about:blank"></iframe>


   var  form = document.getElementById("fabokeForm");
    
    /**/
    var iframe = document.getElementById("hiddenIframe");
    function iframeOnload(){
        var html = "",json = null;
        try{
            var el = (iframe.contentWindow || iframe.contentDocument.parentWindow).document.body;
            while(el &&  el.nodeType !== 3){
                el = el.firstChild;
            }
            html = el.nodeValue ;
            json = html ? eval("(" + html + ")") : false;
        }catch(e){}
        if(json){
            if(json.data && json.data.title){
                alert(json.data.title);
            }else if (json.error){
                alert(json.error || "上传失败。");
            }
        }
    }
    
    if(iframe.attachEvent){
        iframe.attachEvent("onload",iframeOnload);
    }else{
        iframe.onload = iframeOnload;
    }
    //处理页面编码问题
    if(navigator.userAgent.indexOf("MSIE") !== -1){
        form.onsubmit = function(e){
            document.charset='GBK';
        } 
        window.onbeforeunload = function(){
             document.charset='UTF-8';
        }
    }

0
5
分享到:
评论

相关推荐

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。 html页面: &lt;iframe name="FORMSUBMIT" width="1" height="1" &gt;&lt;/iframe&gt; ...

    关于iframe跨域POST提交的方法示例

    以前在面试的时候经常遇到问关于跨域的事儿,所以自己对跨域有一定的概念性了解,知道什么是跨域以及解决跨域的方法,但是具体实际从来没有操作过,直到最近在公司项目中,遇到了一个需要使iframe跨域进行POST提交的...

    js跨域iframepostMessage提交表单

    创建一个隐藏的iframe,将表单嵌入其中,然后在表单提交事件中指定目标为iframe,这样表单的数据就会被发送到iframe加载的URL。 2. **form表单提交**:在HTML中,可以通过设置`&lt;form&gt;`元素的`target`属性为iframe的...

    使用jQuery.form插件,实现完美的表单异步提交

    在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...

    layui弹出层按钮提交iframe表单的方法

    如下所示: layer.open({ id: 'LAY_layuipro', //设定一个id,防止重复弹出 ... var inputForm = $(window.frames[layui-layer-iframe + index].document).contents().find(#userForm); inputForm.

    php之表单文件iframe异步上传

    2. 创建一个`&lt;form&gt;`元素,设置`enctype="multipart/form-data"`以支持文件上传,`target`属性设置为`iframe`的`name`,确保表单提交到`iframe`。 3. 使用JavaScript监听`&lt;iframe&gt;`的`load`事件,当`iframe`加载完成...

    iframe实现异步无刷新提交

    2. **设置iframe的src**:当用户触发提交事件(如点击按钮)时,将`iframe`的`src`属性设置为处理表单提交的服务器端页面URL,并附带任何必要的参数。 3. **绑定事件**:监听`iframe`的`load`事件,当`iframe`加载...

    jquery异步提交form表单

    这是jQuery Form Plugin的一个核心文件,它扩展了jQuery,使得我们可以方便地进行异步表单提交。例如,我们可以使用以下代码来实现: ```javascript $("#myForm").submit(function(event) { event.preventDefault...

    使用iframe实现提交表单不刷新页面

    设置`&lt;form&gt;`的`target`属性为之前创建的`&lt;iframe&gt;`的名称,这样当表单提交时,数据就会发送到`&lt;iframe&gt;`而不是当前页面。同时,确保设置`method`属性为"POST"或"GET",以指定数据提交的方式。以下是一个示例: ```...

    Ajax表单提交插件jquery form

    **Ajax表单提交插件jQuery Form** 在Web开发中,jQuery Form插件是一个非常实用的工具,它使得使用Ajax技术提交HTML表单变得简单而直观。这个插件扩展了jQuery库,提供了强大的功能,允许开发者无刷新地更新页面...

    php 提交表单 关闭layer弹窗iframe的实例讲解

    本文将结合这三个技术点,通过实例讲解如何在PHP表单提交后关闭Layer弹窗中的iframe。 首先,介绍Layer插件的基本使用方法。Layer插件主要通过JavaScript调用,提供了一套API进行弹窗操作。例如,使用layer.open()...

    php无刷新提交表单

    这里定义了一个隐藏的`iframe`元素`frameFile`,它的`name`属性与表单中的`target`属性相匹配,用于接收表单提交后的响应数据。 3. **JavaScript监听与处理**: ```javascript $(function(){ $('#fileUp')....

    js处理iframe的系列问题

    通过对上述知识点的学习,我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题,包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...

    Ajax方式提交带文件上传的表单及隐藏iframe应用

    2. 设置表单目标:将表单的`target`属性设置为IFRAME的ID,这样表单提交后,内容将在IFRAME内加载。 3. 使用JavaScript处理:通过JavaScript监听表单的提交事件,当表单提交时,可以先通过AJAX提交非文件字段的数据...

    ajax(iframe)无刷新提交表单、上传文件

    当使用iframe作为表单提交的目标时,表单数据实际上是在后台异步提交的,用户无需等待表单提交和页面刷新,从而实现无刷新上传。一旦服务器处理完成,可以通过JavaScript(如回调函数)来处理服务器返回的结果,例如...

    vue 解决form表单提交但不跳转页面的问题

    本文将详细介绍如何在Vue中解决表单提交但不跳转页面的问题。 首先,我们需要理解Vue中事件绑定的概念。Vue提供了`v-on`指令用于监听和处理DOM事件,例如表单的提交事件。`v-on`可以简写为`@`,所以`v-on:submit`...

    基于layui点击按钮弹出包含表单的窗口

    这个例子涵盖了layui的`form`和`layer`模块的基本使用,包括按钮事件监听、弹窗创建、表单渲染、表单验证以及表单提交。通过深入学习layui文档,你可以发掘更多高级特性和定制化选项,进一步提升你的前端开发效率。

    基于AdminLTE(bootstrap)用iframe实现的局部刷新的案例

    在使用iframe时,可以利用其天然的提交特性,比如表单提交到iframe中,以避免整个页面刷新。表单的target属性设置为iframe的ID,即可实现在iframe内部提交表单数据。 ```html &lt;!-- form fields --&gt; ``` 这样,...

Global site tag (gtag.js) - Google Analytics