【问题标题】:Fullscreen API without mouseclick or keydown event没有 mouseclick 或 keydown 事件的全屏 API
【发布时间】:2014-11-20 15:57:52
【问题描述】:

我正在为一位朋友创建一个窄播(嗯,不是真的,只是到一个屏幕)页面,该页面从他的网上商店读取内容并显示带有突出显示的项目的幻灯片,以及他的徽标和时间。

要运行此程序,我使用的是带屏幕的 Android 4.1 设备,我已将 Chrome 安装到可以正常运行的设备上。到目前为止一切都很好,只有一件事让我烦恼。正如我们所说,只要用户按下回车键,我就会使用全屏 API 进入全屏状态。但由于内容不断变化,我想偶尔刷新一下以获取新内容。

这就是问题所在:一旦页面刷新,它就会离开全屏模式。我一直在寻找 Chrome Android 中的设置以允许没有鼠标点击或 keydown 事件的全屏模式,但到目前为止还没有成功。有什么方法可以得到我想要的结果(无需单击按键即可全屏显示)?

我使用 Chrome Android 的原因是因为这个浏览器提供了最好的 HTML5 支持(供将来使用)和最好的分辨率 (1280x720)。但它缺少我可以在浏览器中使用的全屏模式。我尝试了带有全屏插件的 Firefox for Android,效果很好(刷新时不会离开全屏),但 Firefox 只给了我一个非常小的 960x520 视口。

我现在想到的只有一件事,那就是执行 AJAX 请求以获取新内容并将页面 HTML 替换为获取的 HTML(或者可能只是“幻灯片”容器)。

感谢您的思考!

【问题讨论】:

  • 是否需要刷新页面? Ajax http 请求可能是一个更好的解决方案......另外,您使用的是哪种服务器? php、node.js等
  • 一个 ajax 请求是我在最后一段中的建议之一,但我不知道这会如何影响脚本的性能(例如缓存是否会变满,导致 js 崩溃?)。现在它都是基于我所拥有的 PHP/jQuery/HTML5。 Node.js 是一个选项(或需要?),因为我计划能够从应用程序实时否决屏幕。
  • 老实说,您的问题仍然有点模糊,我建议发布您到目前为止的代码。
  • 这个问题有什么含糊之处?不需要任何源代码来回答这个问题。安装了 Chrome 的 Android 4.1 设备。按回车键后,我让 Fullscreen API 工作以全屏显示。但是页面刷新会破坏全屏模式。
  • 使用 100% iframe 显示内容

标签: javascript android jquery google-chrome android-fullscreen


【解决方案1】:

此代码的作用与自动刷新页面相同。我不确定它是否会阻止您退出全屏模式,因为我没有工作副本可乱搞。

$.ajax() //Get the current page
  .done(function(msg) {
        document.documentElement.innerHTML = msg;
  });

不过,我不建议这样做。最好的办法是将页面中需要更新的部分抽象为自己的页面,即:

$.ajax("http://example.com/get_next_element")
   .done(function(msg) {
     $("selector_for_fullscreen_element").html(msg);
 });

【讨论】:

  • 是的,我也是这么想的。如果没有使用定期刷新的选项,这是(希望)不刷新的唯一方法。
  • 如果没有特别的 ready() 处理,这种模式往往会使脚本过载;例如,幻灯片会在单击下一步时前进两个图像。它还可以累积为一页设计的JS或为init()onload()
  • @dandavis - 这就是为什么我推荐第二种策略而不是第一种策略的原因。不想覆盖任何现有的 javascript,可能会有风险。只要全屏元素不包含任何 javascript,第二种策略就应该起作用。除此之外,我没有上下文可以提供任何更有用的东西。
  • 第二个对我来说似乎是最好的,这一切都基于需要更新的 div 的内部内容。所以主要是页面的主体。 JS/CSS 都在容器之外。如果我重新加载容器 1000 次,使用第二个示例不会导致任何缓存问题?
  • IIRC,ajax 不缓存数据。
猜你喜欢
  • 1970-01-01
  • 2023-03-23
  • 2014-09-07
  • 2013-02-12
  • 2016-09-01
  • 1970-01-01
  • 2013-09-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多