用头条app打开h5也u页面监听返回键

业务是:广告投放在今日头条APP
现在需求:点了链接到H5页面,返回(物理返回键,或者右滑),提示XX内容,如何实现
使用技术:vue

安卓和苹果自带浏览器按照网上方法,有的可以监听,但是用头条app打开,物理返回键都监听不到,请问老大们,用啥思路解决这个问题

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7435902
  • 这篇博客你也可以参考下:【vue】h5 实现路由管理:保留历史页面,并在后退时释放
  • 除此之外, 这篇博客: vue页面在微信浏览器下拉出现网址的解决,并兼容小米8内置浏览器等浏览器页面到底不能滑动问题(因为app也用到了这个页面)中的 需求:微信小程序内嵌H5页面,隐藏下拉出现网址并兼容小米8等特殊浏览器(因为app也用到了这个页面) 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 重点
    我参考这位大神的解决方案并加以改动 https://www.jianshu.com/p/f8182998895e
    1 在根目录下的index.html中

    	html,body,#app,.wx-pages{
        padding: 0;
          margin: 0;
        height: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
    	}
    

    2 在components目录下创建组件 Scroll.vue 组件
    (你可以直接复制)

    <style scoped="scoped">
        .w-scroll {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
    <template>
        <div ref="scroll" class="w-scroll">
            <slot></slot>
        </div>
    </template>
     
    <script>
        export default {
            name: 'scroll',
            data() {
                return {}
            },
            computed: {},
            mounted() {
                this.wScroll(this.$refs.scroll);
            },
            methods: {
                wScroll(elem) {
                    var startX = 0,startY = 0;
                    document.addEventListener('touchstart', function(evt) {
                        var touch = evt.touches[0]; 
                        startX = Number(touch.pageX); 
                        startY = Number(touch.pageY); 
                    });
                    elem.addEventListener('touchmove', function(ev) {
                        var _point = ev.touches[0],
                            _top = elem.scrollTop;
                        var _bottomFaVal = elem.scrollHeight - elem.offsetHeight;
                        if(_top === 0) {
                            if(_point.clientY > startY) {
                                ev.preventDefault();
                            } else {
                                ev.stopPropagation();
                            }
                        } else if(_top === _bottomFaVal) {
                            elem.scrollTop--;
                        } else if(_top > 0 && _top < _bottomFaVal) {
                            ev.stopPropagation();
                        } else {
    						ev.stopPropagation();
                        }
                    }, {
                        passive: false
                    });
                }
            },
        }
    </script>
    

    3 在你所需要的页面引入

    <template>
    	<Scroll>
    		<div>页面内容<div>
    	</Scroll>
    </template>
    <script>
    import Scroll from '@/components/Scroll';
    	export default {
    		name: 'Home',
    		components:{
                Scroll
           },
        }
    </script>
    

    第一次写 不太会描述 也没有图 希望能帮助到你