[{"data":1,"prerenderedAt":206},["ShallowReactive",2],{"blog-roibest-pwa-use-javascript-api-to-display-element-in-fullscreen-zh-CN":3},{"id":4,"title":5,"excerpt":6,"content":7,"coverImage":159,"meta":166,"site":167,"status":180,"slug":181,"author":182,"category":192,"publishDate":200,"featured":109,"updatedAt":201,"createdAt":202,"contentHtml":203,"previewUrl":204,"localeSlugs":205},326,"PWA 教学：使用JavaScript全屏API显示任意元素","在 PWA（渐进式网页应用）中，使用 全屏 API 来显示元素（如应用界面或某个特定内容）是一种常见的提升用户体验的做法。 这里所说的全屏，是指占用整个用户屏幕而没有任何浏览器甚至后台应用程序的干扰。借用全屏API，只需几行简单的Java Script代码，就可以聚焦到网站值得关注的地方。 PWA教学：Java Script 全屏API打开任意元素的技巧 全…",{"root":8},{"children":9,"direction":23,"format":15,"indent":13,"type":158,"version":18},[10,25,29,45,51,55,59,83,87,92,96,100,114,118,122,126,146],{"children":11,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[12,19,21],{"detail":13,"format":13,"mode":14,"style":15,"text":16,"type":17,"version":18},0,"normal","","在 PWA（渐进式网页应用）中，使用 ","text",1,{"detail":13,"format":18,"mode":14,"style":15,"text":20,"type":17,"version":18},"全屏 API",{"detail":13,"format":13,"mode":14,"style":15,"text":22,"type":17,"version":18}," 来显示元素（如应用界面或某个特定内容）是一种常见的提升用户体验的做法。",null,"paragraph",{"children":26,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[27],{"detail":13,"format":13,"mode":14,"style":15,"text":28,"type":17,"version":18},"这里所说的全屏，是指占用整个用户屏幕而没有任何浏览器甚至后台应用程序的干扰。借用全屏API，只需几行简单的Java Script代码，就可以聚焦到网站值得关注的地方。",{"type":30,"version":31,"format":15,"fields":32,"relationTo":33,"value":34,"id":44},"upload",3,{},"media",{"id":35,"alt":36,"updatedAt":37,"createdAt":37,"url":38,"thumbnailURL":23,"filename":39,"mimeType":40,"filesize":41,"width":42,"height":43},697,"PWA 教学：使用JavaScript全屏API显示任意元素 — inline image","2026-07-21T07:33:38.705Z","https://cms-r2.deepclick.com/PWAJava-f8b6444e-8839a3b05e27.png","PWAJava-f8b6444e-8839a3b05e27.png","image/png",20956,600,314,"6a5f2530422fe800c8532529",{"children":46,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":50},[47],{"detail":13,"format":13,"mode":14,"style":15,"text":48,"type":17,"version":18},"PWA教学：Java Script 全屏API打开任意元素的技巧","heading","h2",{"children":52,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[53],{"detail":13,"format":13,"mode":14,"style":15,"text":54,"type":17,"version":18},"全屏API依靠的就是 requestFullscreen()方法，这个方法可以全屏打开任何元素：",{"children":56,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[57],{"detail":13,"format":13,"mode":14,"style":15,"text":58,"type":17,"version":18},"全屏API支持IE 11+ 和所有现代的Chrome、Firefox桌面浏览器。需要注意的是，直到撰写本文时，仍然需要使用前缀来访问构成API的相关方法和事件处理程序。对于主要的requestFullscreen方法，我们可以使用下面三个不同的前缀方法去兼容不同的浏览器：",{"children":60,"direction":23,"format":15,"indent":13,"type":80,"version":18,"listType":81,"start":18,"tag":82},[61,66,71,75],{"children":62,"direction":23,"format":15,"indent":13,"type":65,"version":18,"value":18},[63],{"detail":13,"format":13,"mode":14,"style":15,"text":64,"type":17,"version":18},"requestFullscreen() (标准方法)","listitem",{"children":67,"direction":23,"format":15,"indent":13,"type":65,"version":18,"value":70},[68],{"detail":13,"format":13,"mode":14,"style":15,"text":69,"type":17,"version":18},"webkitRequestFullscreen()",2,{"children":72,"direction":23,"format":15,"indent":13,"type":65,"version":18,"value":31},[73],{"detail":13,"format":13,"mode":14,"style":15,"text":74,"type":17,"version":18},"mozRequestFullScreen()",{"children":76,"direction":23,"format":15,"indent":13,"type":65,"version":18,"value":79},[77],{"detail":13,"format":13,"mode":14,"style":15,"text":78,"type":17,"version":18},"msRequestFullscreen()",4,"list","bullet","ul",{"children":84,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":50},[85],{"detail":13,"format":13,"mode":14,"style":15,"text":86,"type":17,"version":18},"全屏API从三个方面得到全新体验",{"children":88,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":91},[89],{"detail":13,"format":13,"mode":14,"style":15,"text":90,"type":17,"version":18},"1、提升沉浸式体验","h3",{"children":93,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[94],{"detail":13,"format":13,"mode":14,"style":15,"text":95,"type":17,"version":18},"PWA 旨在提供接近原生应用的用户体验，其中包括全屏显示。通过全屏 API，PWA 可以将页面或应用界面切换到全屏模式，让用户在没有浏览器框架和工具栏的情况下，专注于内容展示。全屏模式常用于视频播放、图片查看、游戏或其他需要全屏展示的应用。",{"children":97,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":91},[98],{"detail":13,"format":13,"mode":14,"style":15,"text":99,"type":17,"version":18},"2\\. 适配不同设备和平台",{"children":101,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[102,112],{"children":103,"direction":23,"format":15,"indent":13,"type":106,"version":31,"fields":107,"id":111},[104],{"detail":13,"format":13,"mode":14,"style":15,"text":105,"type":17,"version":18},"PWA","link",{"linkType":108,"newTab":109,"url":110},"custom",false,"/zh-CN/resources/blog/pwa-helps-creators-provide-opportunities","6a5f2530422fe800c853252a",{"detail":13,"format":13,"mode":14,"style":15,"text":113,"type":17,"version":18}," 旨在跨平台运行，兼容手机、平板和桌面设备。全屏 API 能让 PWA 更加适配这些不同的平台。在移动端，尤其是全屏应用时，用户的浏览器界面会被隐藏，提升了应用的沉浸感和流畅感。桌面端的 PWA 也可以通过全屏 API 提供类似的用户体验。",{"children":115,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":91},[116],{"detail":13,"format":13,"mode":14,"style":15,"text":117,"type":17,"version":18},"3\\. 用于展示内容（如视频、图像等）",{"children":119,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[120],{"detail":13,"format":13,"mode":14,"style":15,"text":121,"type":17,"version":18},"在 PWA 中，视频播放是一个常见的场景。通过全屏 API，你可以让用户将视频切换到全屏，提供更好的观看体验。类似地，PWA 还可以用来展示大图像、图表、地图等内容，并通过全屏模式提升用户的观看和互动体验。",{"children":123,"direction":23,"format":15,"indent":13,"type":49,"version":18,"tag":50},[124],{"detail":13,"format":13,"mode":14,"style":15,"text":125,"type":17,"version":18},"关于ROIBest的PWA技术",{"children":127,"direction":23,"format":15,"indent":13,"type":24,"version":18,"textFormat":13,"textStyle":15},[128,135,137,144],{"children":129,"direction":23,"format":15,"indent":13,"type":106,"version":31,"fields":132,"id":134},[130],{"detail":13,"format":18,"mode":14,"style":15,"text":131,"type":17,"version":18},"ROIBest",{"linkType":108,"newTab":109,"url":133},"https://mis.roibest.com/#/login?uuid=5644007337338913&link_id=&rl=&ad=1&promoter_id=T0SCB&tpl_id=1&channel_id=13&links_no=1521972975283","6a5f2530422fe800c853252c",{"detail":13,"format":13,"mode":14,"style":15,"text":136,"type":17,"version":18},"总部位于新加坡，作为一家倡导创新与科技体验的公司，我们首创逐进式网络应用",{"children":138,"direction":23,"format":15,"indent":13,"type":106,"version":31,"fields":141,"id":143},[139],{"detail":13,"format":13,"mode":14,"style":15,"text":140,"type":17,"version":18},"（PWA）技术",{"linkType":108,"newTab":109,"url":142},"/zh-CN/resources/blog/pwa-google-ads-bid-price-change-policy","6a5f2530422fe800c853252b",{"detail":13,"format":13,"mode":14,"style":15,"text":145,"type":17,"version":18},"，这是一种改变安卓应用程序营销和使用的领先解决方案，为应用开发者和营销人员解决了应用上架、平台抽佣和推广困难等一些列痛点。我们通过先进的创新技术与精准的受众分析，帮助企业在数字营销领域取得卓越成效。",{"type":30,"version":31,"format":15,"fields":147,"relationTo":33,"value":148,"id":157},{},{"id":149,"alt":150,"updatedAt":151,"createdAt":151,"url":152,"thumbnailURL":23,"filename":153,"mimeType":40,"filesize":154,"width":155,"height":156},357,"PWA在短剧行业的落地实践：加速加载与转化率提升 — inline image","2026-07-21T06:52:09.531Z","https://cms-r2.deepclick.com/img_v3_02hg_80864f88-e3ea-4a98-8853-4ef5d3f71f2g-1d5b07ad-typed-6305367667f9.png","img_v3_02hg_80864f88-e3ea-4a98-8853-4ef5d3f71f2g-1d5b07ad-typed-6305367667f9.png",81169,1200,80,"6a5f2530422fe800c853252d","root",{"id":160,"alt":5,"updatedAt":161,"createdAt":161,"url":162,"thumbnailURL":23,"filename":163,"mimeType":40,"filesize":164,"width":42,"height":165},788,"2026-07-21T07:52:15.190Z","https://cms-r2.deepclick.com/wordpress-image-0bcb8a6b-32333950e3c2.png","wordpress-image-0bcb8a6b-32333950e3c2.png",444647,450,{"title":23,"description":23,"image":23},{"id":70,"key":168,"name":169,"prodHost":170,"testHost":171,"blogPath":172,"docPath":173,"zhPrefix":174,"deployHookTest":175,"deployHookProd":176,"enabled":177,"updatedAt":178,"createdAt":179},"roibest","RoiBest","https://www.roibest.com","https://www-stg-roibest.qiliangjia.one","/resources/blog/{slug}","/docs/{slug}","/zh-CN","https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/28cd5297-3c9e-4c80-8431-ddc8b2556e6e","https://api.cloudflare.com/client/v4/pages/webhooks/deploy_hooks/78763ef2-3db8-43d9-a2a5-0ae6ffe24c3f",true,"2026-07-21T11:31:15.739Z","2026-07-14T09:56:11.826Z","published","roibest-pwa-use-javascript-api-to-display-element-in-fullscreen",{"id":31,"name":131,"avatar":183,"updatedAt":190,"createdAt":191},{"id":184,"alt":131,"updatedAt":185,"createdAt":185,"url":186,"thumbnailURL":23,"filename":187,"mimeType":40,"filesize":188,"width":189,"height":189},908,"2026-07-22T02:47:15.086Z","https://cms-r2.deepclick.com/favicon-ae68c4bc4d9d.png","favicon-ae68c4bc4d9d.png",2320,48,"2026-07-22T02:47:22.252Z","2026-07-22T02:30:48.651Z",{"id":193,"site":194,"titleZh":195,"titleEn":196,"slug":197,"order":198,"updatedAt":199,"createdAt":199},10,{"id":70,"key":168,"name":169,"prodHost":170,"testHost":171,"blogPath":172,"docPath":173,"zhPrefix":174,"deployHookTest":175,"deployHookProd":176,"enabled":177,"updatedAt":178,"createdAt":179},"技术指南","Guides","guides",20,"2026-07-21T06:40:11.224Z","2025-01-20T17:57:05.000Z","2026-07-22T03:02:40.868Z","2026-07-21T07:33:42.424Z","\u003Cdiv class=\"payload-richtext\">\u003Cp>在 PWA（渐进式网页应用）中，使用 \u003Cstrong>全屏 API\u003C/strong> 来显示元素（如应用界面或某个特定内容）是一种常见的提升用户体验的做法。\u003C/p>\u003Cp>这里所说的全屏，是指占用整个用户屏幕而没有任何浏览器甚至后台应用程序的干扰。借用全屏API，只需几行简单的Java Script代码，就可以聚焦到网站值得关注的地方。\u003C/p>\n        \u003Cimg\n          alt=\"PWA 教学：使用JavaScript全屏API显示任意元素 — inline image\"\n          height=\"314\"\n          src=\"https://cms-r2.deepclick.com/PWAJava-f8b6444e-8839a3b05e27.png?w=1200&q=85\"\n          width=\"600\"\n        />\n      \u003Ch2>PWA教学：Java Script 全屏API打开任意元素的技巧\u003C/h2>\u003Cp>全屏API依靠的就是 requestFullscreen()方法，这个方法可以全屏打开任何元素：\u003C/p>\u003Cp>全屏API支持IE 11+ 和所有现代的Chrome、Firefox桌面浏览器。需要注意的是，直到撰写本文时，仍然需要使用前缀来访问构成API的相关方法和事件处理程序。对于主要的requestFullscreen方法，我们可以使用下面三个不同的前缀方法去兼容不同的浏览器：\u003C/p>\u003Cul class=\"list-bullet\">\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"1\"\n        >requestFullscreen() (标准方法)\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"2\"\n        >webkitRequestFullscreen()\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"3\"\n        >mozRequestFullScreen()\u003C/li>\u003Cli\n          class=\"\"\n          style=\"\"\n          value=\"4\"\n        >msRequestFullscreen()\u003C/li>\u003C/ul>\u003Ch2>全屏API从三个方面得到全新体验\u003C/h2>\u003Ch3>1、提升沉浸式体验\u003C/h3>\u003Cp>PWA 旨在提供接近原生应用的用户体验，其中包括全屏显示。通过全屏 API，PWA 可以将页面或应用界面切换到全屏模式，让用户在没有浏览器框架和工具栏的情况下，专注于内容展示。全屏模式常用于视频播放、图片查看、游戏或其他需要全屏展示的应用。\u003C/p>\u003Ch3>2\\. 适配不同设备和平台\u003C/h3>\u003Cp>\u003Ca href=\"/zh-CN/resources/blog/pwa-helps-creators-provide-opportunities\">PWA\u003C/a> 旨在跨平台运行，兼容手机、平板和桌面设备。全屏 API 能让 PWA 更加适配这些不同的平台。在移动端，尤其是全屏应用时，用户的浏览器界面会被隐藏，提升了应用的沉浸感和流畅感。桌面端的 PWA 也可以通过全屏 API 提供类似的用户体验。\u003C/p>\u003Ch3>3\\. 用于展示内容（如视频、图像等）\u003C/h3>\u003Cp>在 PWA 中，视频播放是一个常见的场景。通过全屏 API，你可以让用户将视频切换到全屏，提供更好的观看体验。类似地，PWA 还可以用来展示大图像、图表、地图等内容，并通过全屏模式提升用户的观看和互动体验。\u003C/p>\u003Ch2>关于ROIBest的PWA技术\u003C/h2>\u003Cp>\u003Ca href=\"https://mis.roibest.com/#/login?uuid=5644007337338913&link_id=&rl=&ad=1&promoter_id=T0SCB&tpl_id=1&channel_id=13&links_no=1521972975283\">\u003Cstrong>ROIBest\u003C/strong>\u003C/a>总部位于新加坡，作为一家倡导创新与科技体验的公司，我们首创逐进式网络应用\u003Ca href=\"/zh-CN/resources/blog/pwa-google-ads-bid-price-change-policy\">（PWA）技术\u003C/a>，这是一种改变安卓应用程序营销和使用的领先解决方案，为应用开发者和营销人员解决了应用上架、平台抽佣和推广困难等一些列痛点。我们通过先进的创新技术与精准的受众分析，帮助企业在数字营销领域取得卓越成效。\u003C/p>\n        \u003Cimg\n          alt=\"PWA在短剧行业的落地实践：加速加载与转化率提升 — inline image\"\n          height=\"80\"\n          src=\"https://cms-r2.deepclick.com/img_v3_02hg_80864f88-e3ea-4a98-8853-4ef5d3f71f2g-1d5b07ad-typed-6305367667f9.png?w=1200&q=85\"\n          width=\"1200\"\n        />\n      \u003C/div>","https://www.roibest.com/zh-CN/resources/blog/roibest-pwa-use-javascript-api-to-display-element-in-fullscreen",{"zh-CN":181},1784706022916]