uniapp iframe
uniapp 中使用 iframe 的注意事项
uniapp 默认不支持直接使用 iframe 标签，因其跨平台特性与部分平台（如小程序）的限制。以下是替代方案和注意事项：
Webview 组件替代方案
在需要嵌入网页的场景下，可使用 webview 组件（H5 和 App 平台支持）。示例代码：
<template>
<webview v-if="isH5OrApp" :src="url"></webview>
</template>
<script>
export default {
data() {
return {
url: 'https://example.com',
isH5OrApp: false
}
},
mounted() {
this.isH5OrApp = process.env.VUE_APP_PLATFORM === 'h5' || process.env.VUE_APP_PLATFORM === 'app'
}
}
</script>小程序平台的特殊处理
微信小程序需通过 web-view 组件实现类似功能：
<template>
<web-view v-if="isMP" :src="url"></web-view>
</template>
<script>
export default {
data() {
return {
url: 'https://example.com',
isMP: false
}
},
mounted() {
this.isMP = process.env.VUE_APP_PLATFORM === 'mp-weixin'
}
}
</script>动态 URL 注意事项 传递 URL 参数时需进行编码处理：
const encodedUrl = encodeURIComponent('https://example.com?param=1')跨平台兼容建议 通过条件编译实现多平台适配：
// #ifdef H5 || APP-PLUS
const platform = 'webview'
// #endif
// #ifdef MP-WEIXIN
const platform = 'web-view'
// #endif安全限制说明 各平台对嵌入内容有严格限制，需确保域名已加入业务白名单（小程序需配置业务域名）。
