当前位置:Gxlcms > JavaScript > jQuery操作iframe增删窗口

jQuery操作iframe增删窗口

时间:2021-07-01 10:21:17 帮助过:4人阅读

这次给大家带来jQuery操作iframe增删窗口,jQuery操作iframe增删窗口的注意事项有哪些,下面就是实战案例,一起来看一下。

今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息?

如下图所示:

点击之前:

单击之后:

分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术。

【<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分。】

实现是思路:(1)在按钮的上添加一个点击的事件,在点击后加入一个iframe窗口,并将生成图片的地址加上去即可。

具体实现的代码:

(1)给按钮加上点击事件:

<input type="radio" 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标签的中内容
  $("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成图片的地址"></iframe>");// 添加iframe的jquery的语句
});

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Tab选项卡滚动导航切换实现(附代码)

jQuery+Ajax实现表格数据标题排序

以上就是jQuery操作iframe增删窗口的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行