feat:修复碳证中心部分问题
This commit is contained in:
liulong
parent
692173e654
commit
a141806d73
@ -1,10 +1,8 @@
|
||||
/** 与 tzzx 页 VIEWPORT_HEIGHT_OFFSET 保持一致 */
|
||||
const VIEWPORT_HEIGHT_OFFSET = 100;
|
||||
|
||||
export function getViewportIframeFallbackHeight() {
|
||||
const navOffset = parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--page-offset-top'),
|
||||
10
|
||||
);
|
||||
const offset = Number.isFinite(navOffset) ? navOffset : 76;
|
||||
return Math.max(window.innerHeight - offset, 480);
|
||||
return Math.max(window.innerHeight - VIEWPORT_HEIGHT_OFFSET, 480);
|
||||
}
|
||||
|
||||
export function isAllowedIframeMessageOrigin(origin) {
|
||||
|
||||
@ -1,504 +1,249 @@
|
||||
<template>
|
||||
|
||||
<div class="tzzx-page">
|
||||
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
|
||||
<template v-else-if="iframeUrl">
|
||||
|
||||
<iframe
|
||||
|
||||
ref="tzzxIframe"
|
||||
|
||||
:src="iframeUrl"
|
||||
|
||||
class="tzzx-iframe"
|
||||
|
||||
frameborder="0"
|
||||
|
||||
:scrolling="iframeScrolling"
|
||||
|
||||
scrolling="auto"
|
||||
:style="iframeStyle"
|
||||
|
||||
@load="onIframeLoad"
|
||||
|
||||
></iframe>
|
||||
|
||||
</template>
|
||||
|
||||
<div v-else class="empty">链接错误</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
import {
|
||||
|
||||
getViewportIframeFallbackHeight,
|
||||
|
||||
isAllowedIframeMessageOrigin,
|
||||
|
||||
} from '@/pages/index/utils/tzzx-iframe';
|
||||
|
||||
|
||||
|
||||
const DEFAULT_IFRAME_HEIGHT = 800;
|
||||
|
||||
|
||||
/** 视口降级时 iframe 高度 = 视口高度 - 该偏移（预留顶栏/底边距） */
|
||||
const VIEWPORT_HEIGHT_OFFSET = 100;
|
||||
|
||||
export default {
|
||||
|
||||
name: 'tzzx',
|
||||
|
||||
data() {
|
||||
|
||||
return {
|
||||
|
||||
iframeUrl: '',
|
||||
|
||||
loading: true,
|
||||
|
||||
iframeHeight: DEFAULT_IFRAME_HEIGHT,
|
||||
|
||||
iframeScrolling: 'no',
|
||||
|
||||
iframeHeight: 0,
|
||||
heightMode: 'default',
|
||||
|
||||
resizeObserver: null,
|
||||
|
||||
heightCheckTimer: null,
|
||||
|
||||
_messageHandler: null,
|
||||
|
||||
_iframeLoadGeneration: 0,
|
||||
|
||||
};
|
||||
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
iframeStyle() {
|
||||
|
||||
return {
|
||||
|
||||
const base = {
|
||||
width: '100%',
|
||||
|
||||
height: `${this.iframeHeight}px`,
|
||||
|
||||
border: 'none',
|
||||
|
||||
display: 'block',
|
||||
|
||||
};
|
||||
|
||||
if (this.heightMode === 'same-origin' || this.heightMode === 'post-message') {
|
||||
return {
|
||||
...base,
|
||||
height: `${this.iframeHeight}px`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
...base,
|
||||
height: `calc(100vh - ${VIEWPORT_HEIGHT_OFFSET}px)`,
|
||||
minHeight: '480px',
|
||||
};
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
this.fetchPage();
|
||||
|
||||
this.$watch(() => this.$route.query.page, () => this.fetchPage());
|
||||
|
||||
window.addEventListener('resize', this.onWindowResize);
|
||||
|
||||
},
|
||||
|
||||
activated() {
|
||||
|
||||
this.fetchPage();
|
||||
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
|
||||
window.removeEventListener('resize', this.onWindowResize);
|
||||
|
||||
this.cleanup();
|
||||
|
||||
},
|
||||
|
||||
deactivated() {
|
||||
|
||||
this.cleanup();
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
fetchPage() {
|
||||
|
||||
const rawPage = this.$route.query.page;
|
||||
|
||||
const page = Array.isArray(rawPage) ? rawPage[0] : rawPage;
|
||||
|
||||
const nextUrl = page ? String(page).trim() : '';
|
||||
|
||||
|
||||
|
||||
if (nextUrl === this.iframeUrl && !this.loading) {
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
this.cleanup();
|
||||
|
||||
this.resetIframeMetrics();
|
||||
|
||||
|
||||
|
||||
if (nextUrl) {
|
||||
|
||||
this.iframeUrl = nextUrl;
|
||||
|
||||
this.loading = false;
|
||||
|
||||
} else {
|
||||
|
||||
this.iframeUrl = '';
|
||||
|
||||
this.loading = false;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
resetIframeMetrics() {
|
||||
|
||||
this.iframeHeight = DEFAULT_IFRAME_HEIGHT;
|
||||
|
||||
this.iframeScrolling = 'no';
|
||||
|
||||
this.iframeHeight = 0;
|
||||
this.heightMode = 'default';
|
||||
|
||||
this._iframeLoadGeneration += 1;
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
onWindowResize() {
|
||||
|
||||
if (this.heightMode === 'viewport-fallback') {
|
||||
|
||||
this.iframeHeight = getViewportIframeFallbackHeight();
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
onIframeLoad() {
|
||||
|
||||
const iframe = this.$refs.tzzxIframe;
|
||||
|
||||
if (!iframe) return;
|
||||
|
||||
|
||||
|
||||
const loadGeneration = this._iframeLoadGeneration;
|
||||
|
||||
this.cleanupObserversOnly();
|
||||
|
||||
|
||||
|
||||
const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);
|
||||
|
||||
if (!isSameOrigin) {
|
||||
|
||||
this.setupPostMessage(iframe, loadGeneration);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
trySameOrigin(iframe, loadGeneration) {
|
||||
|
||||
try {
|
||||
|
||||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
|
||||
if (!iframeDoc || !iframeDoc.body) {
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const updateHeight = () => {
|
||||
|
||||
if (loadGeneration !== this._iframeLoadGeneration) return;
|
||||
|
||||
|
||||
|
||||
const height = Math.max(
|
||||
|
||||
iframeDoc.body.scrollHeight,
|
||||
|
||||
iframeDoc.body.offsetHeight,
|
||||
|
||||
iframeDoc.documentElement.scrollHeight,
|
||||
|
||||
iframeDoc.documentElement.offsetHeight
|
||||
|
||||
);
|
||||
|
||||
if (height > 0) {
|
||||
|
||||
this.iframeHeight = height + 20;
|
||||
|
||||
this.heightMode = 'same-origin';
|
||||
|
||||
this.iframeScrolling = 'no';
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
updateHeight();
|
||||
|
||||
|
||||
|
||||
if (window.ResizeObserver) {
|
||||
|
||||
this.resizeObserver = new ResizeObserver(updateHeight);
|
||||
|
||||
this.resizeObserver.observe(iframeDoc.body);
|
||||
|
||||
this.resizeObserver.observe(iframeDoc.documentElement);
|
||||
|
||||
} else {
|
||||
|
||||
this.heightCheckTimer = setInterval(updateHeight, 500);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const images = iframeDoc.querySelectorAll('img');
|
||||
|
||||
images.forEach((img) => {
|
||||
|
||||
if (!img.complete) {
|
||||
|
||||
img.addEventListener('load', updateHeight);
|
||||
|
||||
img.addEventListener('error', updateHeight);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
return true;
|
||||
|
||||
} catch (e) {
|
||||
|
||||
console.log('[tzzx] 检测到跨域 iframe，将使用 postMessage / 视口降级方案');
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
setupPostMessage(iframe, loadGeneration) {
|
||||
|
||||
this._messageHandler = (event) => {
|
||||
|
||||
if (loadGeneration !== this._iframeLoadGeneration) return;
|
||||
|
||||
if (!isAllowedIframeMessageOrigin(event.origin)) return;
|
||||
|
||||
if (event.source !== iframe.contentWindow) return;
|
||||
|
||||
|
||||
|
||||
const data = event.data;
|
||||
|
||||
if (!data || data.type !== 'iframeHeight') return;
|
||||
|
||||
|
||||
|
||||
const height = Number(data.height);
|
||||
|
||||
if (!Number.isFinite(height) || height <= 0) return;
|
||||
|
||||
|
||||
|
||||
this.iframeHeight = height + 20;
|
||||
|
||||
this.heightMode = 'post-message';
|
||||
|
||||
this.iframeScrolling = 'no';
|
||||
|
||||
};
|
||||
|
||||
window.addEventListener('message', this._messageHandler);
|
||||
|
||||
|
||||
|
||||
const requestHeight = () => {
|
||||
|
||||
if (loadGeneration !== this._iframeLoadGeneration) return;
|
||||
|
||||
try {
|
||||
|
||||
iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');
|
||||
|
||||
} catch (e) {}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
requestHeight();
|
||||
|
||||
|
||||
|
||||
let retryCount = 0;
|
||||
|
||||
this.heightCheckTimer = setInterval(() => {
|
||||
|
||||
requestHeight();
|
||||
|
||||
retryCount += 1;
|
||||
|
||||
if (retryCount >= 5) {
|
||||
|
||||
clearInterval(this.heightCheckTimer);
|
||||
|
||||
this.heightCheckTimer = null;
|
||||
|
||||
if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {
|
||||
|
||||
this.applyViewportFallback();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
applyViewportFallback() {
|
||||
|
||||
this.iframeHeight = getViewportIframeFallbackHeight();
|
||||
|
||||
this.heightMode = 'viewport-fallback';
|
||||
|
||||
this.iframeScrolling = 'auto';
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
cleanupObserversOnly() {
|
||||
|
||||
if (this.resizeObserver) {
|
||||
|
||||
this.resizeObserver.disconnect();
|
||||
|
||||
this.resizeObserver = null;
|
||||
|
||||
}
|
||||
|
||||
if (this.heightCheckTimer) {
|
||||
|
||||
clearInterval(this.heightCheckTimer);
|
||||
|
||||
this.heightCheckTimer = null;
|
||||
|
||||
}
|
||||
|
||||
if (this._messageHandler) {
|
||||
|
||||
window.removeEventListener('message', this._messageHandler);
|
||||
|
||||
this._messageHandler = null;
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
cleanup() {
|
||||
|
||||
this.cleanupObserversOnly();
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.tzzx-page {
|
||||
|
||||
width: 100%;
|
||||
|
||||
|
||||
|
||||
.tzzx-iframe {
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.loading,
|
||||
|
||||
.empty {
|
||||
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
min-height: 480px;
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
color: #999;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user