也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。</p> <p>今天遇到一个问题：怎样实现点击一个按钮，在当前的<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>上新<a href="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a>一个小窗口，展示一个<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>信息？ </p> <p><h3>如下图所示：</h3> </p> <p>点击之前： </p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201604/20160420171040127.png" alt="" /></p></p> <p>单击之后： </p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201604/20160420171040128.png" alt="" /></p></p> <p>分析：要使新增的小窗口不影响父<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>，我们这里采用iframe的框架的技术。 </p> <p>【<iframe>也应该是框架的一种形式，它与<frame>不同的是，iframe可以嵌在网页中的任意部分。】 </p> <p>实现是思路：（1）在按钮的上<a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>一个点击的事件，在点击后加入一个iframe窗口，并将<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的地址<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>去即可。 </p> <p>具体实现的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>： </p> <p>（1）给按钮<a href="https://www.jb51.cc/tag/jiashang/" target="_blank" class="keywords">加上</a>点击事件： </p> <div class="jb51code"> <pre class="brush:js;"> <input type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" name="dynamicType" id="dianji" style="padding: 0 10px 0 5px;margin-left:10px;margin-top: 13px;"/> <p class="loadPhoto"></p> $("#dianji").click(function(){ $("p.loadPhoto").empty(); // 清空原来的p<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>的中<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a> $("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>的地址">");// 添加iframe的jquery的语句 });
注意：这里iframe的开发之后，会自动的去访问生成图片的地址，这样图片的生成的需求就满足了。
有关jQuery中iframe的操作(点击按钮新增窗口)就给大家介绍这么多，希望对大家有所帮助！
