不用修改原网页,实现弹出式iframe
2009-04-29 11:14
183 查看
好久没写文章了,感觉文笔太生疏了,希望大家不要见笑。
我们在做弹出式窗体时,可以用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弹出容器
我们在做弹出式窗体时,可以用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弹出容器
相关文章推荐
- 利用iframe实现ajax跨域请求,抓取网页中ajax数据
- 用按钮控制iframe显示的网页实现方法
- JS动态修改iframe内嵌网页地址的方法
- 用jrebel实现 jvm热部署,修改类不用重启tomcat
- JavaScript实现网页弹出式窗口的几种方法
- 【Android】实现类似于百度长时间不用APP屏幕变暗——不用修改系统设置权限
- PHP不用递归实现无限分类数据的树形格式化 5行9行代码修改
- 用iframe实现的网页局部刷新
- js实现网页防止被iframe框架嵌套及几种location.href的区别
- 用IFRAME实现网页的内嵌和预载
- 几种location.href的区别 js实现网页防止被iframe框架嵌套功能 .
- 利用DhtmlXtree实现展现,修改,添加,删除,移动功能一棵树上实现,iframe的单个滑动条显示,包含在iframe中树节点中文内容过长问题解决
- 通过修改Hosts文件实现让Win7仅能访问指定的网页
- HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可!
- python批处理实现爬取网页静态图片文件重命名图片统一修改大小等功能
- [转载]Nginx Apache实现网页动静分离 =修改
- 实现域内用户能够通过网页web方式修改与用户密码
- jquery修改网页背景颜色通过css方法实现
- 表格中的iframe实现打开多个网页
- php+mysql实现简单登录注册修改密码网页