更新记录

1.0.0（2025-09-19） 下载此版本

• 第一次更新，具体见下方文档

平台兼容性

uni-app

其他

使用须知

• 1、该组件利用renderJS渲染h5端的iframe实现，所以只支持h5和APP-VUE。
• 2、本地html最好放在static静态资源文件夹中，这样h5才能访问到。
• 3、本地html访问路径要使用绝对路径，比如/static/html/index.html。
• 4、h5使用时，要保证访问的网页链接和当前h5是同源的，否则很多操作无法执行。
• 6、有什么不懂，可以加 1_0_8_7_7_3_5_9_4_2 去掉横杠即可。

props属性

event事件

内置方法

快速开始

    <!-- 线上地址 -->
    <yb-iframe style="height:200px" src="https://www.baidu.com"></yb-iframe>
    <!-- 本地网页 -->
    <yb-iframe style="height:200px" src="/static/html/index.html"></yb-iframe>

自定义拦截地址（仅支持APP）

    <!-- 线上地址 -->
    <yb-iframe ref="iframe" style="height:200px" src="https://www.baidu.com"
    :overrideUrlLoadingOptions="overrideUrlLoadingOptions"
    @overrideurlloading="handleOverrideurlloading"></yb-iframe>

    export default {
        data () {
            return {
                overrideUrlLoadingOptions: {
                    effect: 'instant',//拦截URL请求生效时机 instant-立即生效 touchstart-用户操作Webview窗口后生效
                    mode: 'reject',//拦截模式 allow-不满足match属性定义的条件时拦截url跳转 reject-满足match属性定义的提交时拦截url跳转
                    match: '',//区配是否需要处理的URL请求 支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）
                    exclude: 'none'//排除拦截处理请求类型 none-不排除任何URL请求（即拦截处理所有URL请求） redirect-排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）
                }
            }
        },
        methods: {
            handleOverrideurlloading (e) {
                if ( e.url.startsWith('http') ) {//http链接
                    this.$refs.iframe && this.$refs.iframe.assign(e.url)//调用内部iframe跳转
                } else {
                    //非http链接可以在这里做处理，可能是试图访问三方app
                    console.log('这里是非正常的链接')
                }
            }
        }
    }

iframe和网页通信

• uni-app页面

  <!-- 线上地址 -->
  <yb-iframe ref="iframe" style="height:200px" src="/static/html/index.html" @message="handleMessage"></yb-iframe>
  <button @tap="getIframeContent">通知网页获取内容并返回</button>

  export default {
      methods: {
          //要保证在iframe加载完成后调用
          getIframeContent () {
              this.$refs.iframe.evalJS(`
                  var title = document.title
                  var parent = window.parent || window.top
                  parent.postMessage({title});
              `)
          },
          handleMessage (e) {
              if ( e.title ) {//判断一下是否是自己想要的数据
                  console.log(e.title)
              }
          }
      }
  }