Chúng tôi có các trang trong iframe của chúng tôi gắn thêm nội dung vào trang và sau đó cho phép người dùng làm mới nội dung trong trang tại chỗ. Trong những trường hợp này, chúng tôi đã thấy điều tương tự, nơi nội dung sẽ không co lại khi thích hợp.
FB.Canvas.setSize() gọi _computeContentSize, được trình bày dưới đây:
_computeContentSize: function() {
var body = document.body,
docElement = document.documentElement,
right = 0,
bottom = Math.max(
Math.max(body.offsetHeight, body.scrollHeight) +
body.offsetTop,
Math.max(docElement.offsetHeight, docElement.scrollHeight) +
docElement.offsetTop);
if (body.offsetWidth < body.scrollWidth) {
right = body.scrollWidth + body.offsetLeft;
} else {
FB.Array.forEach(body.childNodes, function(child) {
var childRight = child.offsetWidth + child.offsetLeft;
if (childRight > right) {
right = childRight;
}
});
}
if (docElement.clientLeft > 0) {
right += (docElement.clientLeft * 2);
}
if (docElement.clientTop > 0) {
bottom += (docElement.clientTop * 2);
}
return {height: bottom, width: right};
},
Dòng vấn đề là ở đây:
bottom = Math.max(
Math.max(body.offsetHeight, body.scrollHeight) +
body.offsetTop,
Math.max(docElement.offsetHeight, docElement.scrollHeight) +
docElement.offsetTop);
Ngay cả khi nội dung bên trong iframe của bạn đã bị thu hẹp, giá trị của body.offsetHeight sẽ không co lại .
Để giải quyết việc này, chúng tôi thực hiện một phiên bản tùy chỉnh của hàm computeContentSize mà chỉ tư vấn các docElement cho chiều cao, như vậy:
function rfComputeContentSize() {
var body = document.body,
docElement = document.documentElement,
right = 0,
bottom = Math.max(docElement.offsetHeight, docElement.scrollHeight) + docElement.offsetTop;
if (body.offsetWidth < body.scrollWidth) {
right = body.scrollWidth + body.offsetLeft;
} else {
FB.Array.forEach(body.childNodes, function(child) {
var childRight = child.offsetWidth + child.offsetLeft;
if (childRight > right) {
right = childRight;
}
});
}
if (docElement.clientLeft > 0) {
right += (docElement.clientLeft * 2);
}
if (docElement.clientTop > 0) {
bottom += (docElement.clientTop * 2);
}
return {height: bottom, width: right};
}
Bất cứ lúc nào chúng tôi muốn thay đổi kích thước và biết rằng nội dung có thể thu nhỏ chúng tôi sẽ sử dụng hàm tùy chỉnh để chuyển nội dung tới setSize (ví dụ FB.Canvas.setSize (rfComputeContentSize())), và bất cứ khi nào chúng ta biết rằng nội dung sẽ chỉ phát triển, chúng ta sẽ sử dụng hàm FB.Canvas.setSize() tiêu chuẩn.
Lưu ý rằng chúng tôi đã sử dụng setAutoGrow() và tôi đã không kiểm tra, nhưng tôi giả định rằng nó sử dụng cùng một chức năng để xác định kích thước. Chúng tôi đã tắt cuộc gọi của chúng tôi để setAutoGrow() và sẽ phải cảnh giác về việc gọi setSize() tại thời điểm approrpriate.
Logged lỗi này với Facebook: https://developers.facebook.com/bugs/228704057203827
Nếu bạn là làm điều đó đúng, bạn không cần bất kỳ điều này. – Bob