Iframe 在项目中的使用总结
2015-03-23 16:36
387 查看
参考:http://www.cnblogs.com/MaxIE/archive/2008/08/13/1266597.html问题一:首先我们用iframe加载页面,第一个需要解决的问题是高度自适应的问题,有2个方法第一个是:
问题二:如果iframe加载了某一个页面 a , 但是a 页面又重新指向到了b页面,那iframe如何自动跳转到新页面b呢 ?这种情况需要用到异步加载获取新地址,也介绍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();}
相关文章推荐
- (原创总结)项目首页面显示示意图以及使用的技术FRAMSET,IFRAME
- 北京移动动感地带收费项目个人使用总结
- asp.net c#.net项目中使用总结,遇到的各个问题的汇总
- 对近期使用Nhibernate开发的一个项目的一些总结(一)
- ★★ 总结iframe的使用 第一部分——第三部分
- 使用Spring+Ibatis的项目,关于如何使用事务、如何提升性能的几点总结
- 在项目中使用Hibernate进行大数据量的性能测试,有一些总结(转贴)
- iframe 项目总结 how to use UIImagepickerController read image from user space
- 使用iframe总结
- Flex组件的项目渲染器(ItemRenderer)使用总结
- iframe 项目总结 how to use merge UIImage
- TortoiseSVN 结合项目实践使用总结
- Flex组件的项目渲染器(ItemRenderer)使用总结
- 多层嵌入式框架(iframe)使用总结
- 对近期使用Nhibernate开发的一个项目的一些总结(一)
- 使用用隐藏的 IFrame 提交表单开发的经验总结
- 多层嵌入式框架(iframe)使用总结
- Flex组件的项目渲染器(ItemRenderer)使用总结
- 使用VS的安装项目的总结
- iframe 项目总结 how to use merge UIImage2