美文网首页
mui 内部打开第三方链接、页面

mui 内部打开第三方链接、页面

作者: 可乐_加冰_ | 来源:发表于2020-11-18 16:05 被阅读0次

    父级页面点击某个元素,打开新的页面。

    ①第一种方案
    
    父级页面代码:
    document.getElementById('weather').addEventListener('tap', function() {
            mui.openWindow({
                url: "weatherView.html?url=" +"https://xw.tianqi.qq.com/",
                id: "weather",
                styles:{
                    top: '45px',//新页面顶部位置
                },
                waiting: {
                    autoShow: true,
                    title: '加载中...',
                },
            });
        });
    
    weatherView.html 子页面:
    <header class="mui-bar mui-bar-nav" >
        <span class="mui-icon mui-icon-arrowleft" id="back_to_msg_list" style="padding-left: 6px;"></span>
        <h1 class="mui-title">天气信息</h1>
    </header>
    
    <script>
        var str = window.location.search;
        var url = str.substring(str.indexOf('=') + 1);//获取当前打开链接中所带参数值
        mui.init();
        mui.plusReady(function() {
            var self = plus.webview.currentWebview();
            var view = plus.webview.create(url, "weather", {
                top: "45px", //页面距离高度
                bottom: 0,
            });
            self.append(view);
        });
    
        document.getElementById('back_to_msg_list').addEventListener('tap', function () {
            mui.back()
        });
    </script>
    
    

    ②第二种方案
    
    父级页面代码:
    document.getElementById('weather').addEventListener('tap', function() {
            mui.openWindow({
                url: "weatherView.html?",
                id: "weather",
                styles:{
                    top: '45px',//新页面顶部位置
                },
                waiting: {
                    autoShow: true,
                    title: '加载中...',
                },
                extras: {
                    viewHref:'https://xw.tianqi.qq.com/'
                }
            });
        });
    
    weatherView.html 子页面:
    <header class="mui-bar mui-bar-nav" >
        <span class="mui-icon mui-icon-arrowleft" id="back_to_msg_list" style="padding-left: 6px;"></span>
        <h1 class="mui-title">天气信息</h1>
    </header>
    
    <script>
        mui.init();
        mui.plusReady(function() {
            var url = plus.webview.currentWebview().viewHref;
            var self = plus.webview.currentWebview();
            var view = plus.webview.create(url, "weather", {
                //这里定义页面高度
                top: "45px",
                bottom: 0,
            });
            self.append(view);
        });
    
        document.getElementById('back_to_msg_list').addEventListener('tap', function () {
            mui.back()
        });
    </script>
    
    

    相关文章

      网友评论

          本文标题:mui 内部打开第三方链接、页面

          本文链接:https://www.haomeiwen.com/subject/nipciktx.html