Question

我在iframe中打开了Fullcalendar。我在父页面上有一个来自dyn-web.com的脚本调整了iframe的大小，这在大多数情况下都可以正常工作：

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; 
    ifrm.style.height = getDocHeight( doc ) + 5+"px";
    ifrm.style.visibility = 'visible';
}

当我最初打开日历时，它会很好地调整大小，但是当我选择另一个具有较长页面渲染的月份时，它将不会调整大小。

如何在父窗口上调用调整大小？

这是我日历的开始，但我无法弄清楚动态调用resize的语法。我玩过height参数，但它需要是动态的：

$('#calendar').fullCalendar({
    month: <%=monthStart%>, 
    year: <%=yearStart%>,
    eventSources: 
    [
        { url: <%=esource%>,
          type: 'GET',
          error: function() {
              alert('there was an error while fetching events!');
            }  
          },

Answer 1

你需要做这样的事情：

$('#calendar').fullCalendar({
    month: <%=monthStart%>, 
    year: <%=yearStart%>,
    eventSources: 
    [
    { url: <%=esource%>,
      type: 'GET',
      error: function() {
      alert('there was an error while fetching events! ');
      }      
    },
    viewDisplay: function(view) {
      parent.setIframeHeight(iframeId) ;
    },

每次更改月/周/日视图时，都会调用viewDisplay处理程序。您还可以使用windowResize处理程序捕获实际调整大小后触发的事件。

在FullCalendar中动态调整iframe大小

1 个答案: