现在的位置: 首页 > 综合 > 正文

不用修改原网页,实现弹出式iframe

2012年11月23日 ⁄ 综合 ⁄ 共 1738字 ⁄ 字号 评论关闭

好久没写文章了,感觉文笔太生疏了,希望大家不要见笑。
我们在做弹出式窗体时,可以用jquery.impromptu插件来简化许多工作。我们只需做点小小的添加就能实现强大的功能。

jquery.impromptu 下载地址:http://trentrichardson.com/Impromptu/index.php

效果图:

方法1:

      新建一个ifame容器页面:FrameContainer.aspx

该页面代码: 

 1 <%@ Page Language="C#" AutoEventWireup="true" %>
 2 <script runat="server">
 3     
 4     protected string frameName;
 5 
 6     protected void Page_Load(object sender, EventArgs e)
 7     {
 8         frameName = Request["frameName"] ?? "";
 9     }
10 </script>
11 <iframe id="iframe" src='<%= frameName %>' width="100%" scrolling="no" frameborder="0" onload="this.height=iframe.document.body.scrollHeight;"></iframe>

 在jquery.impromptu文件添加代码:

 
 

 1 function getFrame(frameName)
 2     {
 3         $.get(
 4                 "FrameContainer.aspx?frameName=" + frameName ,
 5                 function(date) {
 6                     $.prompt(date, {
 7                         buttons: {}
 8                     });
 9                 }
10         );
11     }

 
 

 
 

 调用时代码

 
 

<input  type="button" value="正常" onclick="getFrame('default.aspx');"/>  

 
 

 
 

单击button时就在iframe载入'default.aspx'

别忘了引用jquery 和 jquery.impromptu

方法2:

      该方法不需容器页面来承载iframe,直接在jquery.impromptu添加代码:

 
 

1 function getFrame(frameName) {
2     $.prompt("<iframe id='iframe' src='" + frameName + "' width='100%' scrolling='no' frameborder='0' onload='this.height=iframe.document.body.scrollHeight'></iframe>", {
3         buttons: {}
4     });  //onload='this.height=iframe.document.body.scrollHeight'保证iframe的高度和加载的页面一直
5 
6 };

 
 

还是一样的调用方法

 
 

<input  type="button" value="正常" onclick="getFrame('default.aspx');"/>

 别忘了引用jquery 和 jquery.impromptu
最后我们可能需要在弹出式iframe中,做完操作就关闭弹框 这时我们需要这么写:

 
 

window.parent.document.body.removeChild(window.parent.document.getElementById("jqibox"));

 
 

jqibox 是jquery.impromptu弹出容器

抱歉!评论已关闭.