zoukankan      html  css  js  c++  java
  • iframe的一种应用场景

    场景:在页面中用表单Post提交一个请求,该请求会根据提交数据返回页面,页面再通过iframe发送的post来展示在当前页面上,html代码:

    <div class="btn-area">
                <form id="credit_form" class="info-msg" name="form" method="post"
                    action="../../handler/pingpong/getpingpongdata" target="id_iframe">
                        <textarea  name="data" rows="50" cols="50" 
                        style="500px;height:500px"></textarea> 
                        <input type="submit" name="submit" onclick="sumbitData()" value="提交">
                </form>         
        </div>
        <div id="float" class="container" style="display:none">
            <div class="dialog">   
                <iframe name="id_iframe"></iframe>  <!--不需要src来知道要展示的页面,同时也减少了一次请求-->
            </div>
        </div>

     JS代码如下:

    function sumbitData(){
      $("#credit_form").submit();
      $("#float").show();
    }
    window.addEventListener('message',function(rs){ //接收到iframe页面发过来的请求,iframe用window.parent.postMessage("hello","*")来传递数据。
      console.log(rs.data);
      if(rs.data == "cancel_credit"){
         $("#float").hide();
      }
    });
  • 相关阅读:
    新的学习计划
    Python学习搬家啦
    安装数据库软件
    oracle11g RAC之grid安装
    PG源码编译安装
    vnc图形化远程centos7.6步骤
    postgresql 日期格式
    centos配置yum源
    pg创建多个实例
    PostgreSQL配置
  • 原文地址:https://www.cnblogs.com/liuyinlei/p/9025284.html
Copyright © 2011-2022 走看看