Question

我尝试用jQuery和JS调整iframe的大小。首先，我从iframe列表中获取iframe，并在iframe内容准备就绪时调整其大小。

注意：两步调整大小是必要的，否则在之后 iframe页面的内容是一个巨大的空间。

问题：在while循环中，我检查iframe的内容是否准备好，何时不设置1秒的超时。但是jQuery不会检查内容是否准备好它总是进入if并尝试调整iframe的大小但是因为jQuery无法获得NULL元素的大小而失败。

你们有人为我的问题解决了吗？

我的代码：

Vue.component('category', {
  props : ['category'],
  template : '<div>{{ category.name }} <button @click="remove">X</button></div>',

  methods: {
    remove: function() {
      this.$parent.categories.$remove(this.category);
    }
  }
});
new Vue({
    el : '#some-id',
    data : {
        categories : [
          { id : 1, name : 'cat name' },
          { id : 2, name : 'another cat'},
          { id : 3, name : 'third cat'}
        ]
    }
});

修改

查看我的解决方案

Answer 1

您的代码有一些小变化请检查以下内容。

$(document).ready(function () {
    var iframes = $(".my-iframe")[0]; // $(".my-iframe"); /Edited
    $.each(iframes, function () {
        resizeIframe(this);
    });
});

function resizeIframe(iframe) {
    $(iframe).width("100%");
    var iframeIsReady = false;
    do
    {
        if ($(iframe.contentDocument).ready) // added 'iframe.contentDocument' instead of iframe
        {
            var iframeHeight = iframe.contentDocument.body.scrollHeight;
            $(iframe).height(iframeHeight);
            var iframeContentHeight = $(iframe).children("#DivInPage").height();
            $(iframe).height(iframeContentHeight);
            iframeIsReady = true;
        }
        else
        {
            setTimeout(resizeIframe(iframe), 1000);
        }
    }while(!iframeIsReady);
}

试试这个。

我再次检查了代码，发现$（＆＃34; .my-iframe＆＃34;）返回元素对象的数组。我们这里需要的对象不是数组。所以我硬编码第0个索引。你可以使用id代替这个。

Answer 2

解决我的问题是：

    $(document).ready(function () {
        var iframes = $(".my-iframe");
        $.each(iframes, function () {
            resizeIframe(this);
        });
    });

    function resizeIframe(iframe) {
        $(iframe).width("100%");
        setInterval(function () {
            //Check if the Content inside the iframe is ready
            if ($(iframe.contentDocument.body).ready) {
                var iframeHeight = iframe.contentDocument.body.scrollHeight;
                $(iframe).height(iframeHeight);
                var iframeContentHeight = $(iframe).children("#DivInPage").height();
                $(iframe).height(iframeContentHeight);
                //Close the Function
                return;
            }
        }, 1000);
    }

jQuery / JS调整iframe无法正常工作

2 个答案: