Iframe 在项目中的使用总结
参考:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html
问题一:首先我们用iframe加载页面,第一个需要解决的问题是高度自适应的问题,有2个方法
第一个是:
<iframeid="iFramebox" name="iFramebox" width="100%"onload="this.height=iFramebox.document.body.scrollHeight" frameborder="0"scrolling="no" src='/templates/106/ + url + '?id=' +taskid + '></iframe>
这里需要加载的页面的url地址是url + '?id=' + tasked
第二个方法 :
/* 设置iframe高度自适应 */ var _iframe = $("#contentContainer> iframe"); if (_iframe[0].attachEvent) { //attachEvent是IE的监听器 _iframe[0].attachEvent("onload", function () { //iframe页面加载完成后,你需要写的code SetIframeHeight(_iframe); }); } else { _iframe[0].onload = function () { //iframe页面加载完成后,你需要写的code SetIframeHeight(_iframe); }; } function SetIframeHeight(iframe) { _iframe.height(document.frames ?_iframe[0].document.body.scrollHeight :_iframe[0].contentDocument.body.scrollHeight); }
获取iframe 的高度仅作参考:
function reinitIframe(){var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
问题二:
如果iframe加载了某一个页面 a , 但是a 页面又重新指向到了b页面,那iframe如何自动跳转到新页面b呢 ?
这种情况需要用到异步加载获取新地址,也介绍2种方法:
方法一:
$.get(url +'?id=' + taskid, function (data) { $iframeBox.attr("src", data); });
说明: url为取得的a页面的地址,data为新指向的b页面的地址,然后把之前页面中的iframe的src地址进行修改,$iframeBox.attr("src",data)
方法二:也是用异步的方式,传递A 页面的url,type设置为”GET”,
$.ajax({ url: url + '?id=' + taskid, async: false, type: "GET", data: "", success: function (data) { $iframeBox.attr("src",data); } });
问题三:当iframe页面加载完成后,如果我需要对 iframe进来的页面里的标签引用并做一些必要的事情的时候,该如何处理呢?(如何实现在iFrame加载相应的aspx 完成后再操作contentDocument中的元素)
因为通过iframe引进来的页面是个独立的页面,在我们的页面中我们只能引用iframe标签,不能引用到iframe标签里面的任何标签,假如被iframe引入进来的页面里有个id为divHidden的标签,只能通过
$("#divHidden", $("iframe")[0].contentDocument);来获取,contentDocument属性以HTML对象返回框架容纳的文档,可以通过所有标准的DOM方法来处理被返回的对象。
这一部分的完成代码为:
/* load taskinformation {加¨?载?task的ì?详¨o细?信?息?é} */ functionloadInformation(url, taskid) { $("#loadingInfo").show(); var $iframeBox = $('<iframeid="iFramebox" name="iFramebox" width="100%"onload="this.height=iFramebox.document.body.scrollHeight" frameborder="0"scrolling="no" src='/templates/106/ + url + '?id=' + taskid +'></iframe>'); $iframeBox.appendTo($("#serviceTogerther")); $.ajax({ url: url + '?id=' + taskid, async: false, type: "GET", data: "", success: function (data) { $iframeBox.attr("src",data); } }); var _iframe = $iframeBox; if (_iframe[0].attachEvent) { _iframe[0].attachEvent("onload", function () { getHiddenField(); SetIframeHeight(_iframe); }); } else { _iframe[0].onload = function () { getHiddenField(); SetIframeHeight(_iframe); }; } function SetIframeHeight(iframe) { _iframe.height(document.frames ?_iframe[0].document.body.scrollHeight :_iframe[0].contentDocument.body.scrollHeight); } function getHiddenField() { $("#loadingInfo").hide(); var $hiddenInput = $("#divHiddeninput", $("iframe")[0].contentDocument); var $StatusInput =$("#StatusButton").find("input"); var $hotlinks =$("#TaskDetailQuickLink .serviceHotLink .Links"); var sb = $hiddenInput.eq(0).val(); var fb = $hiddenInput.eq(1).val(); var cb = $hiddenInput.eq(2).val(); if (sb == 0) {$StatusInput.first().attr("disabled", "disabled"); } else {$StatusInput.first().removeAttr("disabled"); } if (fb == 0) {$StatusInput.eq(2).attr("disabled", "disabled"); } else {$StatusInput.eq(2).removeAttr("disabled"); } if (cb == 0) {$StatusInput.last().attr("disabled", "disabled"); } else {$StatusInput.last().removeAttr("disabled"); } $StatusInput.eq(1).removeAttr("disabled"); /* Get the hot link number */ $hotlinks.html(""); $(".branding-tagline-normal,.branding-tagline-special",$("iframe")[0].contentDocument).each(function () { var title = $(this).text(); $hotlinks.append('<ahref="javascript:void(0);">' + title + '</a>'); }); if($.trim($hotlinks.find("a").last().text()) != "Comment") { $hotlinks.append('<ahref="javascript:void(0);"> Comment </a>'); } } /* $.get(url + '?id=' + taskid, function(data) { $iframeBox.attr("src", data); }); */ $(".serviceHotLink").show(); }
Iframe 在项目中的使用总结的更多相关文章
- 项目中踩过的坑之-sessionStorage
总想写点什么,却不知道从何写起,那就从项目中踩过的坑开始吧,希望能给可能碰到相同问题的小伙伴一点帮助. 项目情景: 有一个id,要求通过当前网页打开一个新页面(不是当前页面),并把id传给打开的新页面 ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 教你利用iframe在网页中显示天气
来源:http://www.ido321.com/921.html css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{borde ...
- ckeditor编辑器在java项目中配置
一.基本使用: 1.所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2.配置使用 A.将 ...
- RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决
RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决 前言 最近学习React Native技术.将RN引入到原来Xcode项目中有一步:给原来Xcode项目添加所需要的Pod依赖 写好Po ...
- iOS项目中常见的文件
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 关于父窗口获取跨域iframe子窗口中的元素
这几天在项目中遇到,一个难点, 就是需要异步加载一个pdf插件, 同时又需要获取这个插件中的点击事件来生成用户的下载记录. 刚开始也是想了很多方法,网上搜的 格式1:$("#iframe的I ...
- js 自己项目中几种打开或弹出页面的方法
自己项目中,几种打开或弹出页面的方法(部分需要特定环境下) var blnTop = false;//是否在顶层显示 ///动态生成模态窗体(通过字符串生成) ///strModalId:模态窗体ID ...
- 项目中使用http referer,为了盗取图片资源
项目背景:因为图片的数据是爬取的别人的图片,而且保存的数据仅仅是图片地址链接,为了减少数据存储和服务器压力,但是这就引发一个问题,有的图片地址没有做防盗处理,可以随意的下载使用:但有些图片的服务器做了 ...
随机推荐
- 用ElasticSearch和Protovis实现数据可视化
搜索引擎最重要的目的,嗯,不出意料就是搜索.你传给它一个请求,然后它依照相关性返回你一串匹配的结果.我们可以根据自己的内容创造各种请求结构,试验各种不同的分析器,搜索引擎都会努力尝试提供最好的结果. ...
- 取消GridView/ListView item被点击时的效果 记录学习
方法一,在控件被初始化的时候设置 gridView.setSelector(new ColorDrawable(Color.TRANSPARENT)); listView.setSelector(ne ...
- 【BZOJ 3529】【SDOI 2014】数表
看Yveh的题解,这道题卡了好长时间,一直不明白为什么要······算了当时太naive我现在都不好意思说了 #include<cstdio> #include<cstring> ...
- 【BZOJ 2440】【中山市选 2011】完全平方数 莫比乌斯函数+容斥原理
网上PoPoQQQ的课件: •题目大意:求第k个无平方因子数 •无平方因子数(Square-Free Number),即分解之后所有质因数的次数都为1的数 •首先二分答案 问题转化为求[1,x]之间有 ...
- RSA数字证书管理
RSA数字证书管理分为以下几个部分: 1:在存储区内创建数字证书: 2:导出数字证书私钥: 3:导出数字证书公钥: 4:导入数字证书; 5:读取数字证书. 1:在.net开发环境中,在证书存储区内创建 ...
- jquery检测浏览器版本
//检测当前浏览器 function browserType() { var brow = $.browser; //console.log(brow); var bInfo = "&quo ...
- maven2打包不同jdk版本的包
通常在一些特别情况下,我们需要为单独某一个构件打包多个不同jdk版本的包,用来支持不同的jdk,基于maven我们就可以很方便的做到这点. 1.在项目的pom文件中加入如下配置 <project ...
- 【CodeForces 672B】Different is Good
题 字符串所有子串要不同.求修改最少多少个字符. 因为只能是26个字母,显然大于26的不可能有答案,其它情况ans+=u[i]-1:u[i]是字母出现的次数. #include<cstdio&g ...
- Jenkins+CCNET的另类部署图
最近公司的CI系统升级,从CCNET换成Jenkins进行搭建,原因是Jenkins支持所有语言,不再是单一的dotnet语言支持,并且以节点的形式能做分布式自动构建,非常节省配置成功. 而且从MSB ...
- IIS配置错误信息输出
Asp.net: 一.通过 IIS 配置 1.打开IIS管理器,或按住 WIN + R 打开命令行输入 inetmgr 打开 IIS 管理 2.左边目录选择目标站点,在右边 IIS 块中双击 “错误页 ...