首页 前端知识 uni-app加载HTML网页

uni-app加载HTML网页

2024-05-22 09:05:13 前端知识 前端哥 378 497 我要收藏

加载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 大小使用 nvue web-view

使用iframe

<iframe style="pointer-events: none;" :src="weburl" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe>

注意:

如果要禁用iframe嵌入的HTML页面交互,可以添加样式“pointer-events: none”

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9057.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!