个人中心
文章发布
退出
作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont？
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
24
4
我正在开发单页应用程序 (SPA)，我们正在使用 HTML 5 模拟多页应用程序 history.pushState .它在视觉上看起来不错，但在 iOS 画外音中表现不正确。 (我假设它在任何屏幕阅读器中都不起作用，但画外音是我首先尝试的。)
这是我试图实现的行为示例。下面是两个普通的网页:
1.html
<!DOCTYPE html><html>
<body>This is page 1. <a href=2.html>Click here for page 2.</a></body>
</html>
2.html
<!DOCTYPE html><html>
<body>This is page 2. <a href=1.html>Click here for page 1.</a></body>
</html>
漂亮又简单。画外音是这样读的:
Web page loaded. This is page 1.
[swipe right] Click here for page 2. Link.
[double tap] Web page loaded. This is page 2.
[swipe right] Click here for page 1. Visited. Link.
[double tap] Web page loaded. This is page 1.
这里又是一个单页应用程序，使用历史操作来模拟实际页面加载。
spa1.html
<!DOCTYPE html><html>
<body>This is page 1.
<a href='spa2.html'>Click here for page 2.</a></body>
<script src="switchPage.js"></script>
</html>
spa2.html
<!DOCTYPE html><html>
<body>This is page 2.
<a href='spa1.html'>Click here for page 1.</a></body>
<script src="switchPage.js"></script>
</html>
switchPage.js
console.log("load");
attachHandler();
function attachHandler() {
document.querySelector('a').onclick = function(event) {
event.preventDefault();
history.pushState(null, null, this.href);
drawPage();
}
}
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = "This is page " + page +
".\n<a href='spa"+otherPage+".html'>Click here for page " +
otherPage + ".</a>";
attachHandler();
}
window.onpopstate = function() {
drawPage();
};
(请注意，此示例不适用于文件系统；您必须从网络服务器加载它。)
这个 SPA 示例在视觉上看起来与简单的多页面示例完全一样，除了第 2 页“加载速度更快”(因为它根本没有真正加载；这一切都在 JS 中发生)。
但在 Voiceover 中，它并没有做正确的事情。
Web page loaded. This is page 1.
[swipe right] Click here for page 2. Link.
[double tap] Click here for page 1. Visited. Link.
[The focus is on the link! swipe left] This is page 2.
[swipe right] Click here for page 1. Visited. Link.
[double tap] Web page loaded. This is page 1.
焦点在链接上，而它本应位于页面顶部。
我如何告诉 Voiceover 整个页面刚刚更新，以便读者应该从页面顶部继续阅读？
最佳答案
Jorgen's answer , 这是基于 another StackOverflow thread让我走上了正确的轨道。
实际的修复不是将整个页面包装在 <div tabindex=-1> 中而是创建一个 <span tabindex=-1>仅围绕第一部分(“这是第 N 页”)并重点关注。
function drawPage() {
var page, otherPage;
// in real life, we'd do an AJAX call here or something
if (/spa1.html$/.test(window.location.pathname)) {
page = 1;
otherPage = 2;
} else {
page = 2;
otherPage = 1;
}
document.body.innerHTML = '<span tabindex="-1" id="page' + page + '">This is page ' + page +
'.</span>\n<a href="spa'+otherPage+'.html">Click here for page ' +
otherPage + '.</a>';
document.getElementById('page' + page).focus();
setTimeout(function() {
document.getElementById('page' + page).blur();
}, 0);
attachHandler();
}
请注意，在此示例中，我们还在超时中模糊了焦点；否则，非屏幕阅读器浏览器将在跨度周围绘制一个可见的蓝色焦点矩形，这不是我们想要的。模糊焦点不会影响 iOS VO 阅读器的焦点。
关于javascript - 在单页 pushState Web 应用程序中模拟画外音页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38402443/
24
4
0
我有下面这个简单的 html 代码。它在我的 Chrome 和 IE11 开发环境 (Visual Studio 2010) 中按预期工作(将 ?SomeParam 附加到 url)。当我将其放入网络
我在下面有这个简单的 html 代码。它在我的 Chrome 和 IE11 开发环境 (Visual Studio 2010) 中按预期工作(将 ?SomeParam 附加到 url)。当我把它放在网
我在 JavascriptMVC 应用程序中使用 window.history 来为每个 Controller 启用后退/前进/刷新功能。每次加载新 Controller 时，我都会使用 window
假设我们有一个 这对页面的状态进行了重要的更改。 Primefaces 5.1 生成以下 HTML: Click me for state 1 Click me for state 2 在 popst
我正在使用 HTML 历史记录 API 来操作浏览器历史记录堆栈，以在我的网站上使用 JavaScript 控制导航。我设置的更改页面的功能工作正常，但奇怪的是，当我将 pushState 添加到每个
我有一个带过滤器的电子商店。当有人使用过滤器时，url 会通过 AJAX 进行更改。 我所做的是使用 .ajaxComplete 函数来检查 ajax 完成情况。在这个函数中，我有一个名为 Repla
我创建了一个 Web 应用程序，它利用 history pushState 和 replaceState 方法来浏览页面，同时更新历史记录。 脚本本身几乎可以完美运行；它将正确加载页面，并在需要抛出页
我正在研究技术:History API PushState (HTML5) 我需要用于使用 URL 重定向的命令，因为我有服务器的 CherryPy。 我无法将数据从 Cherrypy(使用 Mako
在测试场景中，我有两个页面 pageA 和 pageB。 在第一步中，一个按钮触发window.history.pushState 调用，并在地址栏中显示pageB 的地址。 第二步浏览器地址栏用于请
我有这个 URL 替换查询: window.history.pushState(null, null, window.location.search.replace(/\bcolor=[^&]*/,
我通过 stackoverflow 找到了 history.pushState() 的示例，但我不明白每件事的作用。这就是我的 var stateObj = { foo: "bar" }; h
这是代码: $.ajax({ type: "POST", url: url, xhr: function(
我试图遵循此处使用的示例:http://html5.gingerhost.com/我决定使用 jQuery 的 .load() 代替 JSON， 这是我的代码: $(function() {
我正在使用history.pushState来操作浏览器历史记录，有没有办法撤消/弹出特定的推送状态。 假设我从 google.com 转到 myPage.com。在 ajax 调用之后，我执行 Pu
所以我有这个菜单: Meet The Team What We Do See Us In Action
有谁知道确定是否可以使用 pushState 的库？ 我在用这个: if(window.history.pushState){ window.history.pushState(null, d
如 GitHub's blog 所示, 他们实现了 HTML5's JavaScript pushState树浏览功能(适用于现代浏览器)，带来 AJAX 导航 without Hash Bangs
我已经读过十几遍了，状态对象可以存在于多个键|值对中，并且它与新的历史条目相关联。但是有人可以给我一个状态对象的好处的例子吗？它的实际用途是什么？我无法想象为什么不直接输入 {} 最佳答案 以这个小例
我有一个简单的 React Router 配置。我有另一个基本上用 ... 包装的，它有效。但是这个没有(当然，我尝试使用不同的实现，就像 this post 和许多其他人的答案中所建议的那样。 控制
我使用 history.pushState( stateObject, title, url ) 将新条目推送到浏览器的历史堆栈。尽管有名称，第二个参数 title 并未设置浏览器历史记录中显示的条目
我是一名优秀的程序员,十分优秀！