运用javascript实现Iframe自适应中度

日期:2019-09-07编辑作者:关于计算机

方法一:

那边介绍八个最棒轻巧的办法,不用写什么推断浏览器高度、宽度啥的。

复制代码 代码如下:

上面包车型地铁三种格局自行选购其一就行了。叁个是身处和iframe同页面包车型客车,二个是位于test.html页面包车型客车。

$(window.parent.document).find("#ContentIframe").load(function() {
                    var main = $(window.parent.document).find("#ContentIframe");
                    var thisheight = $(document).height();
                    if (thisheight < 800)
                        thisheight = 800;
                    main.height(thisheight);
                });

小心别放错了地点。
iframe的代码中,注意要写ID,未有ID查找不到

这种写法,只可以对于加载的时候对本来成分的自适应高度,当成分变化的时候(如增多了无数要素,中度变化后)不能够立刻改造父窗体的iframe中度。

复制代码 代码如下:

方法二:

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

复制代码 代码如下:

方法一:

function setMainHeight() {

复制代码 代码如下:

    var main = $(window.parent.document).find("#ContentIframe");
    var thisheight = $("body").height();
    if (thisheight < 800) { thisheight = 800; }
    main.height(thisheight+50);
   
    setTimeout(setMainHeight, 2000);
}

//注意:上边的代码是放在和iframe同二个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

增进三个反应计时器,轮询推断子页面包车型客车中度变化。

方法二:

以上2种都能够是iframe完成高度自适应,小友人们根据本人的档案的次序要求,自由采用吧

复制代码 代码如下:

您恐怕感兴趣的篇章:

  • 关于div自适应中度/左右冲天自适应一致的js代码
  • JS完毕iframe自适应中度的艺术言传身教
  • JS达成很实用的对联广告代码(可自适应中度)
  • JS完毕自适应中度表单文本框的点子
  • js完毕iframe自动自适应中度的章程
  • js调整iframe的可观/宽度让其自适应内容
  • 相称主流浏览器的iframe自适应高度js脚本
  • JavaScript 管理Iframe自适应中度(同或差异域名下)
  • Javascript 文本框textarea高度随内容自适应压实减少
  • js完结的的确的iframe中度自适应(包容IE,FF,Opera)
  • JS完成DIV中度自适应窗口示范

//注意:上面包车型客车代码是坐落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();方法就能够。

您恐怕感兴趣的小说:

  • javascript 中iframe中度自适应(同域)实例详解
  • JS完成iframe自适应高度的不二等秘书籍亲自去做
  • JS消除iframe之间通讯和自适应高度的难题
  • jQuery轻易落到实处iframe的万丈根据页面内容自适应的诀要
  • JS完结iframe自适应中度的措施(包容IE与FireFox)
  • js完结iframe自动自适应中度的格局
  • jsp页面iframe中度自适应的js代码
  • iframe中度自适应及藏匿滚动条的实例详解

本文由今晚最快开奖现场直播发布于关于计算机,转载请注明出处:运用javascript实现Iframe自适应中度

关键词:

jQuery中even选用器的定义和用法

本文实例呈报了jQuery中even选择器的概念和用法。共享给我们供我们参谋。具体深入分析如下: jQuery中even选用器的概...

详细>>

js对象聚集,创造js对象和js类的方法汇总

代码很简单,就不多废话了。 创建js对象和js类的方法汇总,js对象汇总 代码很简单,就不多废话了。 复制代码 代码...

详细>>

使用javascript获取页面名称

代码很简单,就不多废话了,奉上代码: 复制代码 代码如下: // 取当前页面名称(不带后缀名) function getPageName1() {  ...

详细>>

格局用法实例

本文实例讲述了jQuery中height()方法用法。分享给大家供大家参考。具体分析如下: 本文实例讲述了jQuery中outerHeight()方...

详细>>