hookehuyr

feat(结账页面): 添加iframe高度自适应功能

添加adjustIframeHeight函数实现iframe内容高度自适应,移除固定高度样式
在iframe加载完成和关闭时触发高度调整,提升用户体验
......@@ -86,8 +86,10 @@
:src="iframeInfoSrc"
class="w-full border-0"
ref="infoEntryIframe"
style="width: 100%; min-height: 600px; height: auto; border: none;"
style="width: 100%; border: none; display: block;"
frameborder="0"
scrolling="no"
@load="adjustIframeHeight"
></iframe>
</FrostedGlass>
......@@ -267,6 +269,40 @@ const formData = ref({
// 存储当前课程的localStorage键名,用于页面离开时清理
let currentInfoEntryKey = null
// iframe高度自适应函数
const adjustIframeHeight = () => {
const iframe = infoEntryIframe.value
if (iframe) {
try {
// 等待iframe内容加载完成
setTimeout(() => {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
if (iframeDoc) {
const body = iframeDoc.body
const html = iframeDoc.documentElement
// 获取内容的实际高度
const height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
)
// 设置iframe高度,添加一些padding
iframe.style.height = (height + 20) + 'px'
console.log('调整iframe高度:', height + 20 + 'px')
}
}, 100)
} catch (error) {
console.warn('无法访问iframe内容,可能存在跨域限制:', error)
// 如果无法访问iframe内容,设置一个默认高度
iframe.style.height = '400px'
}
}
}
onMounted(async () => {
const { code, data } = await getUserInfoAPI();
......@@ -297,6 +333,11 @@ onMounted(async () => {
formData.value.customize_id = infoData.customize_id
iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id
console.log('从缓存恢复个人信息数据:', infoData)
// 延迟调整iframe高度,等待内容加载
setTimeout(() => {
adjustIframeHeight()
}, 1000)
} catch (error) {
console.error('解析缓存数据失败:', error)
// 如果解析失败,重新录入
......@@ -329,6 +370,8 @@ const showInfoEntry = ref(false)
const iframeSrc = ref(null)
// 个人信息录入弹窗的iframe地址
const iframeInfoSrc = ref(null)
// iframe元素引用
const infoEntryIframe = ref(null)
/**
* 监听个人信息录入弹窗状态,动态修改页面标题
......@@ -435,6 +478,11 @@ const handleInfoEntryClose = () => {
// 写入地址查询详情
iframeInfoSrc.value = itemWithForm.form_url + '&page_type=info' + '&data_id=' + formData.value.customize_id
console.log('个人信息录入弹窗关闭,iframe地址:', iframeInfoSrc.value)
// 延迟调整iframe高度,等待内容加载
setTimeout(() => {
adjustIframeHeight()
}, 500)
} else {
console.log('未找到包含form_url的购物车项目')
}
......