[心缘地方]同学录
首页 | 功能说明 | 站长通知 | 最近更新 | 编码查看转换 | 代码下载 | 常见问题及讨论 | 《深入解析ASP核心技术》 | 王小鸭自动发工资条VBA版
登录系统:用户名: 密码: 如果要讨论问题,请先注册。

[备忘]phonegap + jquery mobile 新开全屏窗口,并关闭的方法

上一篇:[备忘]spring的bean里获取ServletContext的方法
下一篇:[备忘]jquery mobile里,select empty下拉框清空不好使的问题

添加日期:2015/1/27 17:28:40 快速返回   返回列表 阅读3979次
比如商品详情页面,新开一个窗口,查看评论,可以翻页什么的,关闭后,

还是显示商品详情页面,保持原来的状态。

jquery mobile,默认都是当前窗口打开的,从评论页面返回时,相当于重新载入了商品详情页面。
----------
(1)开始想直接在链接里加target="_blank",但是发现能打开窗口,但是用window.close无法关闭窗口。

(2)后来又想用jquery mobile的popup来实现,通过修改css让popup全屏,


<a href="#sql" id="opendialog" data-rel="popup">打开</a>

    <div data-role="popup" id="sql" data-dismissible="false" data-tolerance="0">
        <div data-role="header" data-theme="d">
             <h1>商品评价</h1>

        </div>
        <div role="main" class="ui-content">

            11111
        </div>
    </div>
    <script>
    $(document).on("pagecreate", function (event, ui) {
        $("#sql").on("popupbeforeposition", popUpSql_OnBeforePosition);
    });

    function popUpSql_OnBeforePosition(event, ui) {
        var horizSpacing = 0;
        var vertSpacing = 0;
        var horizPaddingBorderSize = $(this).outerWidth() - $(this).width();
        var vertPaddingBorderSize = $(this).outerHeight() - $(this).height();

        $(this).css({
            left: horizSpacing,
            top: vertSpacing,
            width: window.innerWidth - (horizSpacing * 2) - horizPaddingBorderSize,
            height: window.innerHeight - (vertSpacing * 2) - vertPaddingBorderSize
        });
    }
    </script>



可以打开全屏popup,貌似还凑合,但是一旦内容多,一滚屏,就发现popup之外的内容,即商品详情页面的内容也被看见了。

(3)继续研究phonegap的_blank实现方法,原来phonegap有InAppBrowser这个东西,

用window.open的话,就是调用这个东西,

但是搜:phonegap close window

也没搜到关闭窗口的方法,太扯了~~

搜到个变通的方法:


<a href="#" onclick="opencWin()">xx</a>

<script>
function opencWin(){
        var ref = window.open("${ctx}/mobile/showComment?id=${product.id}", '_blank','location=no');
        ref.addEventListener('loadstop', function(event) { 
            if (event.url.match("${ctx}/mobile/closeWin")) {
                ref.close();
            }
        });
    }
    </script>


<div data-role="page">
    <div data-role="header" data-position="fixed" data-theme="d">
        <a href="${ctx}/mobile/closeWin" id="closeWin" data-role="button"
            data-icon="carat-l">关闭</a>
        <h1>商品评价</h1>
    </div>

    <div data-role="content">

        1111
    </div>
</div>


在评论页面,关闭按钮连接到一个特定页面,而商品详情页面打开窗口后,添加了事件监听,发现新窗口载入了closeWin那个url,就关闭他。

实现了,方法可行。

如果新开窗口时,'location=yes'的话,顶上会多前进,后退的按钮,

还有一个地址栏,还有一个Done的按钮,一点会关闭窗口。

就是太难看,所以直接就'location=no'吧。

官方文档:
http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html

The InAppBrowser window 像一个标准的浏览器,不能访问Cordova APIs.
 

评论 COMMENTS
没有评论 No Comments.

添加评论 Add new comment.
昵称 Name:
评论内容 Comment:
验证码(不区分大小写)
Validation Code:
(not case sensitive)
看不清?点这里换一张!(Change it here!)
 
评论由管理员查看后才能显示。the comment will be showed after it is checked by admin.
CopyRight © 心缘地方 2005-2999. All Rights Reserved