refactor(checkout): 移除iframe高度自适应逻辑并设置固定高度
不再需要动态调整iframe高度,改为使用固定高度300px
Showing
1 changed file
with
4 additions
and
45 deletions
| ... | @@ -86,10 +86,9 @@ | ... | @@ -86,10 +86,9 @@ |
| 86 | :src="iframeInfoSrc" | 86 | :src="iframeInfoSrc" |
| 87 | class="w-full border-0" | 87 | class="w-full border-0" |
| 88 | ref="infoEntryIframe" | 88 | ref="infoEntryIframe" |
| 89 | - style="width: 100%; border: none; display: block;" | 89 | + style="width: 100%; height: 300px; border: none; display: block;" |
| 90 | frameborder="0" | 90 | frameborder="0" |
| 91 | - scrolling="no" | 91 | + scrolling="auto" |
| 92 | - @load="adjustIframeHeight" | ||
| 93 | ></iframe> | 92 | ></iframe> |
| 94 | 93 | ||
| 95 | <!-- 编辑按钮 --> | 94 | <!-- 编辑按钮 --> |
| ... | @@ -282,40 +281,6 @@ const formData = ref({ | ... | @@ -282,40 +281,6 @@ const formData = ref({ |
| 282 | // 存储当前课程的localStorage键名,用于页面离开时清理 | 281 | // 存储当前课程的localStorage键名,用于页面离开时清理 |
| 283 | let currentInfoEntryKey = null | 282 | let currentInfoEntryKey = null |
| 284 | 283 | ||
| 285 | -// iframe高度自适应函数 | ||
| 286 | -const adjustIframeHeight = () => { | ||
| 287 | - const iframe = infoEntryIframe.value | ||
| 288 | - if (iframe) { | ||
| 289 | - try { | ||
| 290 | - // 等待iframe内容加载完成 | ||
| 291 | - setTimeout(() => { | ||
| 292 | - const iframeDoc = iframe.contentDocument || iframe.contentWindow.document | ||
| 293 | - if (iframeDoc) { | ||
| 294 | - const body = iframeDoc.body | ||
| 295 | - const html = iframeDoc.documentElement | ||
| 296 | - | ||
| 297 | - // 获取内容的实际高度 | ||
| 298 | - const height = Math.max( | ||
| 299 | - body.scrollHeight, | ||
| 300 | - body.offsetHeight, | ||
| 301 | - html.clientHeight, | ||
| 302 | - html.scrollHeight, | ||
| 303 | - html.offsetHeight | ||
| 304 | - ) | ||
| 305 | - | ||
| 306 | - // 设置iframe高度,添加一些padding | ||
| 307 | - iframe.style.height = (height + 20) + 'px' | ||
| 308 | - console.log('调整iframe高度:', height + 20 + 'px') | ||
| 309 | - } | ||
| 310 | - }, 100) | ||
| 311 | - } catch (error) { | ||
| 312 | - console.warn('无法访问iframe内容,可能存在跨域限制:', error) | ||
| 313 | - // 如果无法访问iframe内容,设置一个默认高度 | ||
| 314 | - iframe.style.height = '400px' | ||
| 315 | - } | ||
| 316 | - } | ||
| 317 | -} | ||
| 318 | - | ||
| 319 | onMounted(async () => { | 284 | onMounted(async () => { |
| 320 | const { code, data } = await getUserInfoAPI(); | 285 | const { code, data } = await getUserInfoAPI(); |
| 321 | 286 | ||
| ... | @@ -350,10 +315,7 @@ onMounted(async () => { | ... | @@ -350,10 +315,7 @@ onMounted(async () => { |
| 350 | iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id | 315 | iframeInfoSrc.value = infoData.form_url + '&page_type=info' + '&data_id=' + infoData.customize_id |
| 351 | console.log('从缓存恢复个人信息数据:', infoData) | 316 | console.log('从缓存恢复个人信息数据:', infoData) |
| 352 | 317 | ||
| 353 | - // 延迟调整iframe高度,等待内容加载 | 318 | + // 不再需要动态调整iframe高度 |
| 354 | - setTimeout(() => { | ||
| 355 | - adjustIframeHeight() | ||
| 356 | - }, 1000) | ||
| 357 | } catch (error) { | 319 | } catch (error) { |
| 358 | console.error('解析缓存数据失败:', error) | 320 | console.error('解析缓存数据失败:', error) |
| 359 | // 如果解析失败,重新录入 | 321 | // 如果解析失败,重新录入 |
| ... | @@ -523,10 +485,7 @@ const handleInfoEntryClose = () => { | ... | @@ -523,10 +485,7 @@ const handleInfoEntryClose = () => { |
| 523 | iframeInfoSrc.value = itemWithForm.form_url + '&page_type=info' + '&data_id=' + formData.value.customize_id | 485 | iframeInfoSrc.value = itemWithForm.form_url + '&page_type=info' + '&data_id=' + formData.value.customize_id |
| 524 | console.log('个人信息录入弹窗关闭,iframe地址:', iframeInfoSrc.value) | 486 | console.log('个人信息录入弹窗关闭,iframe地址:', iframeInfoSrc.value) |
| 525 | 487 | ||
| 526 | - // 延迟调整iframe高度,等待内容加载 | 488 | + // 不再需要动态调整iframe高度 |
| 527 | - setTimeout(() => { | ||
| 528 | - adjustIframeHeight() | ||
| 529 | - }, 500) | ||
| 530 | } else { | 489 | } else { |
| 531 | console.log('未找到包含form_url的购物车项目') | 490 | console.log('未找到包含form_url的购物车项目') |
| 532 | } | 491 | } | ... | ... |
-
Please register or login to post a comment