父webview调用预加载的popover菜单无法显示

分类：MUI

mui App

父webview中有一个子webview，有一个预加载的菜单webview,然后点击右上角的菜单按扭需要显示popover菜单，但是菜单无法弹出。代码如下

var subpage_style = {  
    top: '44px',  
    bottom: '51px'  
};  

mui.init({  
    swipeBack: false,  
    statusBarBackground:'#f7f7f7',  
    subpages: [{  
        id: 'main',  
        url: 'main.html',  
        styles: subpage_style  
    }]  
});  

/**  
 * 预加载商品分类菜单    
 */  
mui.plusReady(function() {  
    if(mui.os.android){  
        plus.screen.lockOrientation("portrait-primary");  
    }  
    //处理分类菜单，为了避免和子页面初始化等竞争资源，延迟加载分类菜单  
    setTimeout(function () {  
        mui.preload({  
            id: 'class-menu',  
            url:'class-menu.html'  
        });  
    },200);  
});  

//监听右上角菜单按扭  
document.getElementById('classMenu').addEventListener('tap',function(){  
    plus.webview.getWebviewById('class-menu').evalJS('mui("#topPopover").popover("toggle")');  
});

2014-12-05 16:29 负责人:无分享

3 个回复

killet (作者)

以下是index.html部分:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link href="css/index.css" rel="stylesheet" />  

    </head>  

    <body>  
        <div class="m_canvas_wrap">  
            <div class="m_canvas_content">  
                <!--canvas_wrap star-->  
                <div class="m_off_canvas_wrap">  
                    <header class="mui-bar mui-bar-nav">  
                        <a href="javascript:history.go( -1 );" class="mui-icon mui-icon-left-nav mui-pull-left"></a>  
                        <a id="classMenu" class="mui-icon mui-icon-bars mui-pull-right"></a>  
                        <h1 class="mui-title">首页</h1>  
                    </header>  
                    <nav class="mui-bar mui-bar-tab">  
                        <a class="mui-tab-item mui-active" href="main.html">  
                            <span class="mui-icon nav_icon_home"></span> <span class="mui-tab-label">首页</span>  
                        </a>  
                        <a class="mui-tab-item" href="user.html">  
                            <span class="mui-icon mui-icon-search"></span>  
                            <span class="mui-tab-label">搜索</span>  
                        </a>  
                        <a class="mui-tab-item" href="car.html">  
                            <span class="mui-icon nav_icon_cart"></span>  
                            <span class="mui-tab-label">购物车</span>  
                        </a>  
                        <a class="mui-tab-item" href="user.html">  
                            <span class="mui-icon mui-icon-contact"></span>  
                            <span class="mui-tab-label">个人中心</span>  
                        </a>  
                    </nav>  
                </div>  

            </div>  
        </div>  

        <script type="text/javascript" src="js/app.js"></script>  
        <script type="text/javascript" src="js/laytpl/laytpl.js"></script>  
        <script type="text/javascript" src="js/util.js"></script>  
        <script type="text/javascript" src="javascript/index.js"></script>  

    </body>  

</html>

killet (作者)

menu总价（有用到模板引擎）:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <link href="css/index.css" rel="stylesheet" />  
    </head>  

    <body>  
        <div id="goodsClassDiv">  
            <script type="text/html" id="goodsClassTpl">  
                <div id="topPopover" class="mui-popover">  
                    <div class="mui-popover-arrow"></div>  
                    <div class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view mui-table-view-chevron">  
                                <li class="mui-table-view-cell">商品分类</li>  
                                {{# for(var i=0; i <d.length; i++){ }}   
                                    <li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">{{ d[i].className }}</a>  
                                        <ul class="mui-table-view mui-table-view-chevron">  
                                            {{# for(var j=0; j <d[i].classList.length; j++){ }}   
                                                <li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">{{ d[i].classList[j].className }}</a> </li>  
                                            {{# } }}  
                                        </ul>  
                                    </li>  
                                {{# } }}  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
            </script>  
        </div>  
        <script type="text/javascript" src="js/laytpl/laytpl.js"></script>  
        <script type="text/javascript" src="js/app.js"></script>  
        <script type="text/javascript" src="js/util.js"></script>  
        <script type="text/javascript" src="javascript/class-menu.js"></script>  
    </body>  

</html>

YL

兄台解决了吗，我在ios上遇到了这个问题，android机上没这个问题

该问题目前已经被锁定, 无法添加新回复

父webview调用预加载的popover菜单无法显示

3 个回复

公告

相关问题

父webview调用预加载的popover菜单无法显示

与内容相关的链接

3 个回复

公告

相关问题