iframe的一种应用场景

Posted anthonyliu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe的一种应用场景相关的知识,希望对你有一定的参考价值。

场景:在页面中用表单Post提交一个请求,该请求会根据提交数据返回页面,该页面通过iframe展示在当前页面上,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="width: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页面发过来的请求
         console.log(rs.data);
         if(rs.data == "cancel_credit"){
            $("#float").hide();
         }
      });

 

以上是关于iframe的一种应用场景的主要内容,如果未能解决你的问题,请参考以下文章

结合两个代码片段?将用户输入的 Youtube url 转换为嵌入 url,然后将 iframe src 替换为转换后的 url

网页后门的网页后门和网页挂马

#私藏项目实操分享# iframe 在 SAP 三款产品中的三个应用场景

区块链DAPP 开发入门 代码实现 场景应用

java 代码片段

当 URL 包含片段时,iframe 会导致父元素在 Google Chrome 上向上滚动