uniapp H5端的web-view其实是被转为iframe运行 , 有些第三方网站加了同源限制,禁止iframe引入自己的网站页面

本文探讨了在移动端网页跳转中,为何选择localStorage来存储DOM、page和scrollTop,避免sessionStorage因跨域问题消失。作者还提及了手机回退时的缓存策略和localStorage清除操作。
摘要由CSDN通过智能技术生成

我们使用a标签直接跳转第三方页面。首先在查看第三方网站的时候把已有的dom、page和scrollTop值用localStorage存储起来,在这里为什么不用sessionStorage呢?因为当使用a标签跳转的时候,在移动端页面都是在一个窗口,两个url地址不是同源的话,之前的sessionStorage会消失,所以这里使用localStorage。查看原文后,手机物理回退到上一页的时候首先判断是否含有localStorage,有就直接展示缓存的数据,没有就重新加载列表,在这里展示完缓存数据后就要把localStorage清除掉,如果不清除的话,你刷新页面加载的还是你缓存的数据。

这个问题可以通过监听键盘弹出事件以及修改输入框的位置来解决。具体的做法如下: 1. 在uniapp中,可以使用`onKeyboardHeightChange`事件来监听键盘弹出事件,该事件会在键盘弹出或收起时触发。 2. 在事件处理函数中,可以获取到键盘高度,然后根据键盘高度来计算输入框需要向上移动的距离。 3. 修改输入框的位置,可以使用`uni.createSelectorQuery`来获取输入框的位置和大小,然后通过修改`input`元素的`top`样式来移动输入框。 下面是一个示例代码: ```javascript <template> <view> <web-view src="https://example.com"></web-view> <input type="text" ref="input" placeholder="请输入内容"></input> </view> </template> <script> export default { methods: { onKeyboardHeightChange({ height }) { const query = uni.createSelectorQuery().in(this); query.select('input').boundingClientRect((res) => { const top = res.top - height; uni.$emit('input-top-change', top); }).exec(); } }, mounted() { uni.onKeyboardHeightChange(this.onKeyboardHeightChange); uni.$on('input-top-change', (top) => { this.$refs.input.$el.style.top = `${top}px`; }); }, destroyed() { uni.offKeyboardHeightChange(this.onKeyboardHeightChange); uni.$off('input-top-change'); } } </script> ``` 在上面的代码中,我们监听了`onKeyboardHeightChange`事件,并在事件处理函数中使用`uni.createSelectorQuery`来获取输入框的位置和大小。然后通过`uni.$emit`来触发一个自定义事件,将输入框需要移动的距离传递给父组件。父组件监听到该事件后,通过修改`input`元素的样式来移动输入框。 需要注意的是,在移动输入框时,需要将其父元素的`position`属性设置为`relative`或`absolute`,否则`top`样式无效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值