xiaoyu/txw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复碳证中心滚动条、footer问题

Browse Source
This commit is contained in:
liulujian 2026-05-27 22:56:20 +08:00
parent a80cb4542b
commit 6b7c182f61
1 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
txw-mhzc-web/src/pages/index/views/tzzx/index.vue
View File

@ -34,8 +34,8 @@ export default {
heightMode: 'default',
resizeObserver: null,
heightCheckTimer: null,
_messageHandler: null,
_iframeLoadGeneration: 0,
messageHandler: null,
iframeLoadGeneration: 0,
};
},
computed: {
@ -96,14 +96,19 @@ export default {
resetIframeMetrics() {
this.iframeHeight = 0;
this.heightMode = 'default';
this._iframeLoadGeneration += 1;
this.iframeLoadGeneration += 1;
},
onIframeLoad() {
console.log('[tzzx debug] onIframeLoad, iframeUrl=', this.iframeUrl);
const iframe = this.$refs.tzzxIframe;
if (!iframe) return;
if (!iframe) {
console.log('[tzzx debug] onIframeLoad: no iframe ref');
return;
}
const loadGeneration = this._iframeLoadGeneration;
const loadGeneration = this.iframeLoadGeneration;
console.log('[tzzx debug] onIframeLoad: loadGeneration=', loadGeneration);
this.cleanupObserversOnly();
const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);
@ -114,23 +119,31 @@ export default {
trySameOrigin(iframe, loadGeneration) {
try {
console.log('trySameOrigin');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (!iframeDoc || !iframeDoc.body) {
console.log('[tzzx debug] trySameOrigin: no doc or body');
return false;
}
const updateHeight = () => {
if (loadGeneration !== this._iframeLoadGeneration) return;
if (loadGeneration !== this.iframeLoadGeneration) {
console.log(`[tzzx debug] loadGeneration: ${loadGeneration}, this.iframeLoadGeneration: ${this.iframeLoadGeneration}`)
console.log('[tzzx debug] updateHeight: generation mismatch, skip');
return;
}
const height = Math.max(
const height = Math.ceil(Math.max(
iframeDoc.body.scrollHeight,
iframeDoc.body.offsetHeight,
iframeDoc.documentElement.scrollHeight,
iframeDoc.documentElement.offsetHeight
);
));
console.log('[tzzx debug] updateHeight: height=', height, ', current iframeHeight=', this.iframeHeight);
if (height > 0) {
this.iframeHeight = height + 20;
this.iframeHeight = height;
this.heightMode = 'same-origin';
console.log('[tzzx debug] updateHeight: set iframeHeight=', this.iframeHeight);
}
};
@ -152,16 +165,19 @@ export default {
}
});
console.log('[tzzx debug] trySameOrigin: success, returning true');
return true;
} catch (e) {
console.log('[tzzx debug] trySameOrigin: catch error=', e);
console.log('[tzzx] 检测到跨域 iframe，将使用 postMessage / 视口降级方案');
return false;
}
},
setupPostMessage(iframe, loadGeneration) {
this._messageHandler = (event) => {
if (loadGeneration !== this._iframeLoadGeneration) return;
console.log('[tzzx debug] setupPostMessage: loadGeneration=', loadGeneration);
this.messageHandler = (event) => {
if (loadGeneration !== this.iframeLoadGeneration) return;
if (!isAllowedIframeMessageOrigin(event.origin)) return;
if (event.source !== iframe.contentWindow) return;
@ -169,16 +185,21 @@ export default {
if (!data || data.type !== 'iframeHeight') return;
const height = Number(data.height);
if (!Number.isFinite(height) || height <= 0) return;
console.log('[tzzx debug] postMessage received: height=', height, ', type=', data && data.type);
if (!Number.isFinite(height) || height <= 0) {
console.log('[tzzx debug] postMessage: invalid height, skip');
return;
}
this.iframeHeight = height + 20;
this.iframeHeight = Math.ceil(height);
this.heightMode = 'post-message';
console.log('[tzzx debug] postMessage: set iframeHeight=', this.iframeHeight);
};
window.addEventListener('message', this._messageHandler);
window.addEventListener('message', this.messageHandler);
const requestHeight = () => {
if (loadGeneration !== this._iframeLoadGeneration) return;
if (loadGeneration !== this.iframeLoadGeneration) return;
try {
iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');
} catch (e) {}
@ -193,7 +214,7 @@ export default {
if (retryCount >= 5) {
clearInterval(this.heightCheckTimer);
this.heightCheckTimer = null;
if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {
if (loadGeneration === this.iframeLoadGeneration && this.heightMode === 'default') {
this.applyViewportFallback();
}
}
@ -201,10 +222,12 @@ export default {
},
applyViewportFallback() {
console.log('[tzzx debug] applyViewportFallback');
this.heightMode = 'viewport-fallback';
},
cleanupObserversOnly() {
console.log('[tzzx debug] cleanupObserversOnly');
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
@ -213,9 +236,9 @@ export default {
clearInterval(this.heightCheckTimer);
this.heightCheckTimer = null;
}
if (this._messageHandler) {
window.removeEventListener('message', this._messageHandler);
this._messageHandler = null;
if (this.messageHandler) {
window.removeEventListener('message', this.messageHandler);
this.messageHandler = null;
}
},
@ -229,6 +252,7 @@ export default {
<style lang="less" scoped>
.tzzx-page {
width: 100%;
padding-bottom: 20px;
.tzzx-iframe {
display: block;