zoukankan      html  css  js  c++  java
  • 利用iframe进行js跨域处理

    function iframeform(url)        //创建form和iframe
    {
        var object = this;
        object.time = new Date().getTime();
        object.form = $('<form action="'+url+'" target="iframe'+object.time+'" method="post" style="display:none;" id="form'+object.time+'" name="form'+object.time+'"></form>');
        //name 属性必须
        object.addParameter = function(parameter,value)
        {
            $("<input type='hidden' />")
             .attr("name", parameter)
             .attr("value", value)
             .appendTo(object.form);
        }
    
        object.send = function()
        {
            var iframe = $('<iframe data-time="'+object.time+'" style="display:none;" id="iframe'+object.time+'" name="iframe'+object.time+'"></iframe>'); //name属性是必须
            $( "body" ).append(iframe); 
            $( "body" ).append(object.form);
            object.form.submit();
            iframe.load(function(){  
                         $('#form'+$(this).data('time')).remove(); 
                         $(this).remove(); 
                          });
        }
    }
    /******************************/
    /*
    *用法
    */
      var PostData ={             //需要发送的数据
                              vid:$(this).data(vid),
                              msg:TMdata.msg,
                              time:timeformatted,
                              fontSize:TMdata.fontSize,
                              fontMode:TMdata.fontMode,
                              fontColor:TMdata.fontColor,
                              timestamp:timestamp()
                          };  
    
       var dummy = new iframeform('TM.html');
                        dummy.addParameter('vid',PostData.vid);
                        dummy.addParameter('msg',PostData.msg);
                        dummy.addParameter('time',PostData.time);
                        dummy.addParameter('fontSize',PostData.fontSize);
                        dummy.addParameter('fontMode',PostData.fontMode);
                        dummy.addParameter('fontColor',PostData.fontColor);
                       dummy.addParameter('timestamp',PostData.timestamp);
                        dummy.send();

    原理:form可以跨域发送数据,通过将需要post的内容写入type="hidden"的input中name,value,然后点击提交,将form的action设置为目标服务器的url,target设置为iframe 的名称,
    iframe 要设置name属性,最好和iframe的id同名;这样就可以实现无刷新的跨域post了,但是由于浏览器防止重复提交的功能,所以如果直接提交到iframe的话,后面你刷新页面的话,
    浏览器就 会提示是否要重复提交,所以这里我们监听iframe的load事件,当iframe成功load之后,就将iframe的src指向空白页或移除iframe,从而浏览器认为已经跳转到新页面了,
    刷新也就不会提示重复提交的弹出框了。这里我们还可以在iframe
    load成功的时候,通过contenWindow属性来获取服务器的响应。

    $("iframe").load(function(){
    var doc = $(this).get(0).contentWindow||$(this).get(0).contentWindow; //用于获取在iframe中响应的后台服务器数据
    alert(doc.document.body.innerHTML); //弹出显示iframe里面的内容
    $(this).attr("src","about:blank");
    $(this).get(0).onload = null;
    });
    参考:http://blog.sina.com.cn/s/blog_6940cab30101a1yj.html
  • 相关阅读:
    CF1391D 【505】
    CF1389C 【Good String】
    CF1364C 【Ehab and Prefix MEXs】
    CF1353E 【K-periodic Garland】
    CF1349A 【Orac and LCM】
    CF1352C 【K-th Not Divisible by n】
    CF413D 【2048】
    CF257B 【Playing Cubes】
    CF267A 【Subtractions】
    2018.8.16提高B组模拟考试
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3958033.html
Copyright © 2011-2022 走看看