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