Skip to content

Commit 813d9ce

Browse files
margbug01-cybermargbug01-cyber
committed
fix: move iframe height calculation to parent frame
The resize script inside the sandboxed iframe never executed because the sandbox lacks allow-scripts. Move height calculation to the parent page which can access iframe DOM via allow-same-origin. Also monitor image load events to recalculate height after images finish loading, preventing content from being clipped. Remove overflow:hidden from iframe body to avoid hiding content during resize.
1 parent def066b commit 813d9ce

2 files changed

Lines changed: 38 additions & 46 deletions

File tree

‎mail-viewer/imap-mail-app/public/index.html‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1040,13 +1040,22 @@ <h3>添加邮箱账户</h3>
10401040
iframe.onload = function() {
10411041
var doc = iframe.contentDocument;
10421042
doc.open();
1043-
doc.write('<!DOCTYPE html><html><head><base target="_blank"></head><body>' + data.html + '</body></html>');
1043+
doc.write('<!DOCTYPE html><html><head><base target="_blank"><style>img{max-width:100%;height:auto;}</style></head><body>' + data.html + '</body></html>');
10441044
doc.close();
10451045
doc.querySelectorAll('a[href]').forEach(function(a) {
10461046
a.setAttribute('target', '_blank');
10471047
a.setAttribute('rel', 'noopener noreferrer');
10481048
});
1049-
iframe.style.height = doc.body.scrollHeight + 40 + 'px';
1049+
var recalc = function() { iframe.style.height = doc.body.scrollHeight + 40 + 'px'; };
1050+
doc.querySelectorAll('img').forEach(function(img) {
1051+
if (!img.complete) {
1052+
img.addEventListener('load', recalc);
1053+
img.addEventListener('error', recalc);
1054+
}
1055+
});
1056+
recalc();
1057+
setTimeout(recalc, 200);
1058+
setTimeout(recalc, 800);
10501059
};
10511060
iframe.src = 'about:blank';
10521061
}

‎mail-viewer/templates/index.html‎

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -799,40 +799,8 @@ <h5 class="modal-title" id="composeModalLabel"><i class="bi bi-pencil-square me-
799799
iframe.setAttribute('scrolling', 'no');
800800
iframe.style.overflow = 'hidden';
801801

802-
const resizeScript = `
803-
(function () {
804-
const resize = () => {
805-
const body = document.body;
806-
const doc = document.documentElement;
807-
const height = Math.max(
808-
body ? body.scrollHeight : 0,
809-
body ? body.offsetHeight : 0,
810-
doc ? doc.scrollHeight : 0,
811-
doc ? doc.offsetHeight : 0
812-
);
813-
if (window.frameElement) {
814-
window.frameElement.style.height = (height + 20) + 'px';
815-
}
816-
};
817-
818-
window.addEventListener('load', resize);
819-
if (window.ResizeObserver && document.body) {
820-
new ResizeObserver(resize).observe(document.body);
821-
}
822-
Array.from(document.images || []).forEach((img) => {
823-
if (!img.complete) {
824-
img.addEventListener('load', resize);
825-
img.addEventListener('error', resize);
826-
}
827-
});
828-
requestAnimationFrame(resize);
829-
setTimeout(resize, 120);
830-
setTimeout(resize, 500);
831-
})();
832-
`;
833-
834802
iframeDoc.open();
835-
iframeDoc.write(`<!DOCTYPE html><html><head><meta charset="UTF-8"><base target="_blank"><style>html,body{margin:0;padding:0;overflow:hidden;background:transparent;}body{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:14px;color:#1a2421;padding:12px;word-break:break-word;overflow:hidden;}img{max-width:100%;height:auto;}a{color:#4a7c9b;}</style></head><body>${mailContent}<script>${resizeScript}<\/script></body></html>`);
803+
iframeDoc.write(`<!DOCTYPE html><html><head><meta charset="UTF-8"><base target="_blank"><style>html,body{margin:0;padding:0;background:transparent;}body{font-family:"Noto Sans SC",system-ui,sans-serif;font-size:14px;color:#1a2421;padding:12px;word-break:break-word;}img{max-width:100%;height:auto;}a{color:#4a7c9b;}</style></head><body>${mailContent}</body></html>`);
836804
iframeDoc.close();
837805

838806
// 强制所有链接在新标签页打开（覆盖邮件中显式设置的 target）
@@ -841,17 +809,32 @@ <h5 class="modal-title" id="composeModalLabel"><i class="bi bi-pencil-square me-
841809
a.setAttribute('rel', 'noopener noreferrer');
842810
});
843811

844-
try {
845-
const body = iframeDoc.body;
846-
const doc = iframeDoc.documentElement;
847-
const height = Math.max(
848-
body ? body.scrollHeight : 0,
849-
body ? body.offsetHeight : 0,
850-
doc ? doc.scrollHeight : 0,
851-
doc ? doc.offsetHeight : 0
852-
);
853-
iframe.style.height = (height + 20) + 'px';
854-
} catch (e) {}
812+
// 从父页面计算 iframe 高度（sandbox 无 allow-scripts，脚本无法在 iframe 内执行）
813+
const recalcHeight = () => {
814+
try {
815+
const body = iframeDoc.body;
816+
const doc = iframeDoc.documentElement;
817+
const height = Math.max(
818+
body ? body.scrollHeight : 0,
819+
body ? body.offsetHeight : 0,
820+
doc ? doc.scrollHeight : 0,
821+
doc ? doc.offsetHeight : 0
822+
);
823+
iframe.style.height = (height + 20) + 'px';
824+
} catch (e) {}
825+
};
826+
827+
// 监听 iframe 内图片加载完成后重新计算高度
828+
iframeDoc.querySelectorAll('img').forEach(img => {
829+
if (!img.complete) {
830+
img.addEventListener('load', recalcHeight);
831+
img.addEventListener('error', recalcHeight);
832+
}
833+
});
834+
835+
recalcHeight();
836+
setTimeout(recalcHeight, 200);
837+
setTimeout(recalcHeight, 800);
855838
}
856839

857840
// 更新未读邮件计数 badge

0 commit comments

Comments
 (0)