为 Windows 8 开发相当新,我正在开发一个具有相当扁平模型的应用程序。我看了又看,但似乎找不到关于如何设置 WinJS 页面以防止向后导航的明确答案。我曾尝试深入研究 API,但它没有说明任何内容。
我尝试使用的代码是
WinJS.Navigation.canGoBack = false;
不走运,它一直抱怨该属性是只读的,但是,没有设置方法可以更改它。
提前谢谢,~肖恩
为 Windows 8 开发相当新,我正在开发一个具有相当扁平模型的应用程序。我看了又看,但似乎找不到关于如何设置 WinJS 页面以防止向后导航的明确答案。我曾尝试深入研究 API,但它没有说明任何内容。
我尝试使用的代码是
WinJS.Navigation.canGoBack = false;
不走运,它一直抱怨该属性是只读的,但是,没有设置方法可以更改它。
提前谢谢,~肖恩
canGoBack
确实只有一个 getter(定义在 中base.js
),它反映了 backstack 的缺失或存在;即nav.history.backstack
.
按钮本身的外观由相关按钮 DOM 对象上的 disabled 属性控制,该属性又是控制可见性的 CSS 选择器的一部分。因此,如果您自己修改后退按钮的显示,请注意导航管道也在做同样的事情。
可以显式设置后台堆栈;有一个示例导航和导航历史示例 ,其中包括恢复历史记录以及使用beforenavigate阻止导航,代码如下:
// in ready
WinJS.Navigation.addEventListener("beforenavigate", this.beforenavigate);
//
beforenavigate: function (eventObject) {
// This function gives you a chance to veto navigation. This demonstrates that capability
if (this.shouldPreventNavigation) {
WinJS.log && WinJS.log("Navigation to " + eventObject.detail.location + " was prevented", "sample", "status");
eventObject.preventDefault();
}
},
您无法更改 canGoBack,但您可以禁用按钮以隐藏它并释放历史堆栈。
// disabling and hiding backbutton
document.querySelector(".win-backbutton").disabled = true;
// freeing navigation stack
WinJS.Navigation.history.backStack = [];
这将防止后退并仍然允许前进。
如此多的搜索和尝试禁用后退按钮的不同方法,终于找到了一个不错的解决方案。它改编自另一个 stackoverflow 问题。
我的解决方案
在片段页面的开头,就在页面定义开始声明 ready: 函数时,我使用了上述算法的改编版本,并使用生成的元素选择来设置 disabled 属性。
// Retrieve Generated Back Button
var elems = document.getElementsByTagName('*'), i;
for (i in elems)
{
if((" "+elems[i].className+" ").indexOf("win-backbutton") > -1)
{
var d = elems[i];
}
}
// Disable the back button
d.setAttribute("disabled", "disabled");
该代码从页面的 DOM 中获取所有元素,并将其过滤为生成的后退按钮。当找到合适的元素时,它被分配给一个变量,然后我们可以从那里设置 disabled 属性。
我找不到很多关于在 WinJS 导航应用程序中解决默认导航的文档,所以这里有一些失败的方法(仅供参考):
通过类和设置获取元素 | 可能因为做错而失败,因为我对 HTML 和 javascript 几乎没有经验。
使用上述方法,但在 for 循环中设置属性会破坏应用程序并导致其因未知原因冻结。
在导航完成之前在 default.js 中设置属性。| javascript 调用将无法识别被调用的方法或 DOM 元素,可能是由于页面的初始化状态。
还有其他一些,但我认为必须有更好的方法来在页面加载后检索元素。如果有人能启发我,我将不胜感激。~肖恩·R。