为什么定义了img的src属性页面实际不显示？

分类：HTML5+

HTML5

代码如下

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="initial-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 rel="stylesheet" href="css/mui.min.css">  
        <style>  
            header.mui-bar {  
                display: none;  
            }  

            .mui-bar-nav~.mui-content {  
                padding: 0;  
            }  

            .title {  
                margin: 35px 15px 10px;  
            }  

            .title+.content {  
                margin: 10px 15px 35px;  
                color: #bbb;  
                text-indent: 1em;  
                font-size: 14px;  
                line-height: 24px;  
            }  

            .mui-table-view {  
                margin-bottom: 35px;  
            }  

            li {  
                list-style: none;  
                margin: 0;  
                padding: 0;  
            }  

            label {  
                color: #EC971F;  
            }  
        </style>  
    </head>  

    <body onload="test()">  
        <div class="mui-content">  
            <ul class="mui-table-view" style="text-align: center;">  
                <li class="mui-table-view-cell">  
                    <div id="genggaitouxiang" style="width:120px; height:120px; border-radius:50%; overflow:hidden;clear: both;display: block;margin: auto;">  
                        <img id="imgTouXiang" />  
                    </div>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>陈龙</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>手机</label>  
                    <label>1554866</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>银行卡管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>公司信息管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>联系人管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>报表统计</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>版本信息</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>意见反馈</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>常见问题</label>  
                </li>  
                <li id="test" class="mui-table-view-cell">  
                    <label>test</label>  
                </li>  
            </ul>  
            <script src="js/mui.min.js"></script>  
            <script type="text/javascript" src="js/mtkc_ajax.js" ></script>  
            <script type="text/javascript" charset="utf-8">  
            function test(){  
                console.log("我被执行了");  
            };  
                var info = null;  
                mui.init({  
                    keyEventBind: {  
                        backbutton: false,  
                        menubutton: false  
                    },  
                    preloadPages:  [{  
                        id: 'caidan/touxiangxiugai.html',  
                        url: 'caidan/touxiangxiugai.html'  
                    }]  
                });  
                window.addEventListener('setinfo', function(event) {  
                    var uid =plus.storage.getItem("uid");  

                    mtck_ajax.mt_getinfo(uid,function(ret){  
                        info=ret;  
                        document.getElementById("imgTouXiang").src = "http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg";  
                        alert("a");console.log(JSON.stringify(info));  
                        console.log(document.getElementById("imgTouXiang").src);  
                    });  
                });  
                console.log(info);  
                document.getElementById('test').addEventListener('tap', function() {  
                    console.log(JSON.stringify(info));  
                        document.getElementById("imgTouXiang").src = "http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg";  
                    })  
                    //获得侧滑主窗口webview对象  
                var main = null;  
                mui.plusReady(function() {  
                    main = plus.webview.currentWebview().opener();  
                });  

                //优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；  
                document.getElementById("genggaitouxiang").addEventListener("tap", function() {  
                    var page = plus.webview.getWebviewById('caidan/touxiangxiugai.html');  
                    console.log(info);  
                    mui.fire(page, 'setinfo', {  
                            id: info  
                        });  
                    mui.openWindow('caidan/touxiangxiugai.html', 'caidan/touxiangxiugai.html', {});  
                });  
            </script>  
    </body>  

</html>

调试信息如下

 null at offcanvas-drag-right-plus-menu.html:127  
 我被执行了 at offcanvas-drag-right-plus-menu.html:93  
 109.757309 at fahuo/index.html:155  
 39.587173 at fahuo/index.html:156  
 null at offcanvas-drag-right-plus-menu.html:127  
 我被执行了 at offcanvas-drag-right-plus-menu.html:93  
 {"message":"","user":{"number":null,"state":0,"type":0,"password":null,"personalauth":0,"companyauth":0,"adminname":null,"valid":0,"account":"1554866","uid":"cf1ca03a0cbc4265a6cf56d4736143e7","realname":null,"sex":0,"driverauth":0,"creditvalue":0,"avatar":"http://img0.coal.com/20160721/2016072100363823.jpg","cardimg1":null,"cardimg2":null,"cardimg3":null,"tel":null,"email":null,"registime":"2016-07-13 21:21:49","logintime":null,"loginip":null,"stateinfo":null,"integral":0,"balance":0},"success":true} at offcanvas-drag-right-plus-menu.html:112  
 http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg at offcanvas-drag-right-plus-menu.html:113  
 null at renzheng/geren.html:28  
 cf1ca03a0cbc4265a6cf56d4736143e7 at fahuo/index.html:68  
 cf1ca03a0cbc4265a6cf56d4736143e7 at renzheng/geren.html:26  
 确定按钮 at fahuo/index.html:78

我是在登录的时候执行的自定义事件，理论上来说应该已经设置了，但是打开后没有，执行了mtck_ajax.mt_getinfo这个方法，在这个方法中可以得到info的值，但是一旦出了这个方法后，info就会为空，到现在没有找到因为什么

2016-08-07 18:16 负责人:无分享

3 个回复

赵梦欢 - 专注前端，乐于分享！

 mui.fire(page, 'setinfo', {  
        id: info  
 });

window.addEventListener('setinfo', function(event) {  
        var uid =plus.storage.getItem("uid");  

        mtck_ajax.mt_getinfo(uid,function(ret){  
                        info=ret;  
                        document.getElementById("imgTouXiang").src = "http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg";  
                        alert("a");console.log(JSON.stringify(info));  
                        console.log(document.getElementById("imgTouXiang").src);  
         });  
 });

代码中这两段代码为啥会出现在同一个页面，你想进行传参数？自定义事件传值适用于页面之间传参。

aefj (作者)

修改成了这样，还是不能用

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="initial-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 rel="stylesheet" href="css/mui.min.css">  
        <style>  
            header.mui-bar {  
                display: none;  
            }  

            .mui-bar-nav~.mui-content {  
                padding: 0;  
            }  

            .title {  
                margin: 35px 15px 10px;  
            }  

            .title+.content {  
                margin: 10px 15px 35px;  
                color: #bbb;  
                text-indent: 1em;  
                font-size: 14px;  
                line-height: 24px;  
            }  

            .mui-table-view {  
                margin-bottom: 35px;  
            }  

            li {  
                list-style: none;  
                margin: 0;  
                padding: 0;  
            }  

            label {  
                color: #EC971F;  
            }  
        </style>  
    </head>  

    <body onload="test()">  
        <div class="mui-content">  
            <ul class="mui-table-view" style="text-align: center;">  
                <li class="mui-table-view-cell">  
                    <div id="genggaitouxiang" style="width:120px; height:120px; border-radius:50%; overflow:hidden;clear: both;display: block;margin: auto;">  
                        <img id="imgTouXiang" />  
                    </div>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>陈龙</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>手机</label>  
                    <label>1554866</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>银行卡管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>公司信息管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>联系人管理</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>报表统计</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>版本信息</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>意见反馈</label>  
                </li>  
                <li class="mui-table-view-cell">  
                    <label>常见问题</label>  
                </li>  
                <li id="test" class="mui-table-view-cell">  
                    <label>test</label>  
                </li>  
            </ul>  
            <script src="js/mui.min.js"></script>  
            <script type="text/javascript" src="js/mtkc_ajax.js" ></script>  
            <script type="text/javascript" charset="utf-8">  
            function test(){  
                console.log("我被执行了");  
            };  
                var info = null;  
                mui.init({  
                    keyEventBind: {  
                        backbutton: false,  
                        menubutton: false  
                    }  
                });  
                window.addEventListener('setinfo', function(event) {  
                    var uid =plus.storage.getItem("uid");  

                    mtck_ajax.mt_getinfo(uid,function(ret){  
                        info=ret;  
                        document.getElementById("imgTouXiang").src = "http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg";  
                        alert("a");console.log(JSON.stringify(info));  
                        console.log(document.getElementById("imgTouXiang").src);  
                    });  
                });  
                console.log(info);  
                document.getElementById('test').addEventListener('tap', function() {  
                    console.log(JSON.stringify(info));  
                        document.getElementById("imgTouXiang").src = "http://imgsrc.baidu.com/forum/w%3D580/sign=367e1e803b6d55fbc5c6762e5d234f40/5cd98d1001e9390131d6ff607dec54e737d19693.jpg";  
                    })  
                    //获得侧滑主窗口webview对象  
                var main = null;  
                mui.plusReady(function() {  
                    main = plus.webview.currentWebview().opener();  
                });  

                //优化显示出来的侧滑菜单，只需监听该菜单的左滑事件，然后将其关闭即可；在菜单上右滑，不做任何操作；  
                document.getElementById("genggaitouxiang").addEventListener("tap", function() {  
                    var page = plus.webview.getWebviewById('caidan/touxiangxiugai.html');  
                    mui.openWindow('caidan/touxiangxiugai.html', 'caidan/touxiangxiugai.html', {});  
                });  
            </script>  
    </body>  

</html>

正常的页面

不正常的页面

正常的页面是使用test按钮调用出来的

赵梦欢 - 专注前端，乐于分享！

经过测试排查，是预加载的原因，侧滑菜单使用了预加载，此时webview没有显示就改变dom会失效，建议将需要改变dom结构的代码写在show方法执行之后：

mui.plusReady(function() {  
       var ws=plus.webview.currentWebview();  
       ws.addEventListener("show", function(e){  
               document.getElementById("imgTouXiang").setAttribute('src',"images/iconfont-tianjia.png");  
       }, false);  
});

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

为什么定义了img的src属性页面实际不显示？

3 个回复

公告

相关问题

为什么定义了img的src属性页面实际不显示？

与内容相关的链接

3 个回复

公告

相关问题