加载HTML内容
v-html:更新元素的 innerHTML
<view v-html="html"></view>
注意:
- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。
- 如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来替代。
- App端和H5端支持 v-html ,微信小程序会被转为 rich-text,其他端不支持 v-html 。
加载HTML网址
使用web-view
<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
注意:
- 小程序仅支持加载网络网页,不支持本地html
- 补充说明:app-vue下web-view组件不支持自定义样式,而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。
- 小程序端 web-view 组件一定有原生导航栏,下面一定是全屏的 web-view 组件,navigationStyle: custom 对 web-view 组件无效。
- App 端使用 uni.web-view.js 的最低版为uni.webview.1.5.4.js。
- App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在
uni-app 项目根目录->hybrid->html
文件夹下或者static
目录下,如下为一个加载本地网页的uni-app
项目文件目录示例: - nvue
web-view
必须指定样式宽高 - App 网页向应用
postMessage
为实时消息 - app-nvue
web-view
默认没有大小,可以通过样式设置大小,如果想充满整个窗口,设置flex: 1
即可,标题栏不会自动显示web-view
页面中的 title。如果想充满整个窗口且想要显示标题推荐使用 vue 页面的web-view
(默认充满屏幕不可控制大小), 想自定义web-view
大小使用 nvueweb-view
使用iframe
<iframe style="pointer-events: none;" :src="weburl" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe>
注意:
如果要禁用iframe嵌入的HTML页面交互,可以添加样式“pointer-events: none”