账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    微信h5用web-view嵌套显示不了!
    30
    0
    <template> <view class="content"> <!-- <iframe width="100%" height="100%" :src="jumpLink" frameborder="0"> </iframe> --> <web-view width="100%" height="100%" :webview-styles="webviewStyles" :src="jumpLink"></web-view> </view></template><script>import { readGetIntegral } from "@/api/period";export default { data() { return { jumpLink: "", id: "", equipment: "", }; }, onLoad(options) { this.jumpLink = options.jumpLink; // window.location.href = this.jumpLink; this.id = options.id; this.getIntegral(); }, methods: { getIntegral() { let timer1 = setTimeout(() => { readGetIntegral({ id: this.id }) .then((res) => { console.log("上传成功"); }) .catch((err) => { console.log("上传失败"); }); clearTimeout(timer1); timer1 = null; }, 60 * 1000); } },};</script><style scoped>.content { height: 100vh; position: relative;}</style>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 安静的离开了 普通会员 1楼

      微信H5嵌套Web-view可能有以下几种可能原因:

      1. Web-view的宽度和高度设置不足:微信内置的Web-view页面宽度和高度通常设置为固定的,如果页面的实际宽度或高度超过了这些限制,就可能无法正确显示。你可以尝试将Web-view的宽度和高度调整为页面的实际宽度或高度,或者使用CSS样式来调整宽度和高度,例如:

      <web-view src="https://example.com" style="width: 100%; height: 100%;"></web-view>

      或者:

      <web-view style="width: 100%; height: 100%; position: absolute; left: 0; top: 0;"> <div style="width: 100%; height: 100%;"></div> </web-view>

      1. Web-view页面的编码问题:如果Web-view页面使用的是非标准的HTML或JavaScript代码,或者编码格式与微信内置的Web-view不兼容,也可能导致嵌套Web-view显示不全。你可以尝试使用微信的内置HTML解析器(如JS-SDK)来解析Web-view页面的HTML代码,或者使用专业的前端构建工具(如Webpack或Babel)来处理Web-view页面的编码问题。

      2. Web-view页面的JavaScript代码不兼容:如果Web-view页面包含了一些JavaScript代码,这些代码可能与微信内置的Web-view页面不兼容,导致嵌套Web-view无法正常工作。你可以尝试在微信H5中添加一些特定的JavaScript代码来兼容Web-view页面的JavaScript,例如:

      ```

      ```

      或者:

      ```

      ```

      或者:

      ```

      ```

      以上代码将向Web-view页面添加两个plugins属性,分别指定Web-view页面的JavaScript插件号(1或2),然后在你的微信H5中加载这两个插件的JavaScript代码。

      1. Web-view页面的子组件布局问题:如果Web-view页面包含了一些子组件(如图表、按钮等),这些组件可能使用了JavaScript或CSS属性,这些属性可能与微信内置的Web-view页面的样式或布局不兼容,导致嵌套Web-view无法正确显示。你可以尝试在Web-view页面中添加一些特定的CSS样式或JavaScript代码来控制子组件的样式或布局,例如:

      ```

      ```

      或者:

      ```

      ```

      以上代码将设置两个子组件的定位方式,一个子组件使用绝对定位,另一个子组件使用相对定位,然后在微信H5中加载这两个子组件的JavaScript代码。

      1. Web-view页面的样式问题:如果Web-view页面使用了一些特定的CSS样式,这些样式可能与微信内置的Web-view页面的样式不兼容,导致嵌套Web-view无法正确显示。你可以尝试在Web-view页面中添加一些特定的CSS样式,例如:

      ```

      ```

      以上代码将设置Web-view页面的样式,例如设置其定位方式、宽度和高度、背景色等,然后在微信H5中加载这些样式代码。

      如果以上方法都不能解决问题,你可能需要联系微信开发者团队或相关技术文档,了解更详细的情况和解决方案。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部