比如商品详情页面,新开一个窗口,查看评论,可以翻页什么的,关闭后,
还是显示商品详情页面,保持原来的状态。
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.
|