当前位置: 首页 > 编程笔记 >

使用jQuery不判断浏览器高度解决iframe自适应高度问题

王锐
2023-03-14
本文向大家介绍使用jQuery不判断浏览器高度解决iframe自适应高度问题,包括了使用jQuery不判断浏览器高度解决iframe自适应高度问题的使用技巧和注意事项,需要的朋友参考一下

这里介绍两个超级简单的方法,不用写什么判断浏览器高度、宽度啥的。

下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。

注意别放错了地方。
iframe的代码中,注意要写ID,没有ID查找不到


<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

方法一:


//注意:下面的代码是放在和iframe同一个页面调用

$("#main").load(function(){

var mainheight = $(this).contents().find("body").height()+30;

$(this).height(mainheight);

}); 

方法二:


//注意:下面的代码是放在test.html调用

$(window.parent.document).find("#main").load(function(){

var main = $(window.parent.document).find("#main");

var thisheight = $(document).height()+30;

main.height(thisheight);

});

在做项目的过程中需要使用iframe,但是iframe默认有一个高度,超过该默认高度的会内容会被隐藏起来,而小于该默认高度的内容呢又会把默认高度当成内容的高度,在经过寻找答案的过程中,找到了怎样去控制iframe高度自适应

iframe自适应高度本身是很简单的方法,就是在页面加载完成后,重新计算一下高度即可。

代码如下:


//公共方法:设置iframe的高度以保证全部显示数据

//function SetPageHeight() {

//    var iframe = getUrlParam('ifname');

//    var myiframe = window.parent.document.getElementById(iframe);

//     iframeLoaded(myiframe);

//}

var iframeLoaded = function (iframe) {

    if (iframe.src.length > 0) {

        if (!iframe.readyState || iframe.readyState == "complete") {

            var bHeight = 

            iframe.contentWindow.document.body.scrollHeight;

            var dHeight = 

            iframe.contentWindow.document.documentElement.scrollHeight;

            var height = Math.max(bHeight, dHeight);

            iframe.height = height;

        }

    }

}

//分页时重新设置 iframe 高度 ; 修改后:iframe.name = iframe.id

var reSetIframeHeight = function()

{

    try {

        var oIframe = parent.document.getElementById(window.name);

        oIframe.height = 100;

        iframeLoaded(oIframe);

    }

    catch (err)

    {

        try {

         parent.document.getElementById(window.name).height = 1000;

          } catch (err2) { }

    }

}

调用reSetIframeHeight();方法即可。

 类似资料:
  • 本文向大家介绍教你用jquery实现iframe自适应高度,包括了教你用jquery实现iframe自适应高度的使用技巧和注意事项,需要的朋友参考一下 iframe代码,注意要写ID jquery代码一: jquery代码二:

  • 本文向大家介绍jquery实现textarea 高度自适应,包括了jquery实现textarea 高度自适应的使用技巧和注意事项,需要的朋友参考一下 之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 以上就是本文所述的全部内容了,希望对大家学习jQuery能够有所帮助。

  • 问题内容: 我想设计一个带有横幅和iframe的网页。我希望iframe可以填满所有剩余的页面高度,并在浏览器调整大小时自动调整大小。是否可以仅使用CSS而无需编写Javascript代码来完成它? 我尝试在iframe上进行设置,结果非常接近,但是iframe尝试填充整个页面高度,包括banner div元素的高度,因此我得到了不必要的垂直滚动条。这不是完美的。 更新说明 :对不起,我没有很好地

  • 本文向大家介绍javascript原生和jquery库实现iframe自适应高度和宽度,包括了javascript原生和jquery库实现iframe自适应高度和宽度的使用技巧和注意事项,需要的朋友参考一下 javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! 基于Jquery库的代码很好实现: ‍基于JS原生代码的实现: 只需在你被ifr

  • 本文向大家介绍javascript 中iframe高度自适应(同域)实例详解,包括了javascript 中iframe高度自适应(同域)实例详解的使用技巧和注意事项,需要的朋友参考一下 javascript 中iframe高度自适应(同域)        今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码:              iframe嵌入页面时需要等待它完

  • 本文向大家介绍js实现iframe自动自适应高度的方法,包括了js实现iframe自动自适应高度的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现iframe自动自适应高度的方法。分享给大家供大家参考。具体如下: 在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长。删除数据后,ifr