三星Orsay型号智能电视Javascript多页面应用开发问询

一、JavaScript开发Orsay应用的参考资料 #

• 深挖三星官网Legacy文档的Web Application Development子板块：里面包含JS API详细参考、开发规范、调试步骤，还有基础功能的示例代码，很多细节藏在子页面里
• 第三方开发者社区归档资源：早期智能电视开发论坛里有不少Orsay JS实战笔记、踩坑记录，很多开发者会分享自己的项目结构和实现思路
• 官网Legacy页面的示例包下载区：能找到官方提供的JS应用示例，涵盖UI组件、页面切换等核心场景，直接解压就能参考代码逻辑

二、JavaScript版本是否仅支持SPA？ #

不是，Orsay的JS环境同时支持传统多页面跳转和SPA两种模式。早期开发者常用传统多页面来构建复杂应用，SPA则适合需要流畅交互的场景，两种方案都有成熟的实现路径。

三、JavaScript版本实现多页面应用的方法 #

方法1：传统URL跳转（带参数传递） #

用原生JS的window.location实现页面跳转，参数通过URL拼接传递，兼容性最好，示例：

// 页面A跳转至页面B并传参
function goToPageB() {
  const userId = "123";
  const userName = "测试用户";
  // 中文参数需编码
  window.location.href = `pageB.html?userId=${userId}&userName=${encodeURIComponent(userName)}`;
}

// 页面B获取参数
function getPageParams() {
  const params = new URLSearchParams(window.location.search);
  const userId = params.get("userId");
  const userName = decodeURIComponent(params.get("userName"));
  console.log("接收参数：", userId, userName);
}
// 页面加载时执行
window.onload = getPageParams;

方法2：iframe模拟页面切换 #

通过切换iframe的src实现无刷新页面切换，体验接近SPA，适合需要保留全局状态的场景，示例：

<!-- 主页面index.html -->
<div id="pageContainer" style="width:100%;height:100%;">
  <iframe id="mainFrame" src="pageA.html" frameborder="0" width="100%" height="100%"></iframe>
</div>
<script>
// 切换页面函数
function switchPage(pageUrl, params) {
  const frame = document.getElementById("mainFrame");
  // 拼接参数到URL
  const fullUrl = params ? `${pageUrl}?${new URLSearchParams(params).toString()}` : pageUrl;
  frame.src = fullUrl;
}

// 调用示例：比如在pageA的按钮点击时触发
// switchPage("pageB.html", { category: "电影", pageNum: 1 });
</script>

方法3：SPA模式（单页内切换视图） #

用div作为不同页面的容器，通过隐藏/显示容器实现页面切换，参数通过全局变量传递，示例：

<!-- 主页面index.html -->
<div id="pageA" class="page active">
  <button onclick="showPage('pageB', { content: '来自页面A的消息' })">跳转到页面B</button>
</div>
<div id="pageB" class="page">
  <div id="pageBContent"></div>
  <button onclick="showPage('pageA')">返回页面A</button>
</div>
<style>
.page { display: none; width:100%;height:100%; }
.page.active { display: block; }
</style>
<script>
// 全局存储页面参数
let currentParams = {};

function showPage(pageId, params) {
  // 隐藏所有页面容器
  document.querySelectorAll(".page").forEach(page => page.classList.remove("active"));
  // 显示目标页面
  document.getElementById(pageId).classList.add("active");
  // 传递并使用参数
  if (params) {
    currentParams = params;
    if (pageId === "pageB") {
      document.getElementById("pageBContent").innerText = currentParams.content;
    }
  }
}
</script>

补充：AppsFramework的Scene传参方法 #

你提到的AppsFramework用Scene跳转时，可通过navigator.pushScene传递参数，接收方在onLoad回调中获取：

// 跳转时传参
navigator.pushScene("sceneB", { itemId: 456, title: "示例场景" });

// SceneB的onLoad方法接收参数
SceneB.prototype.onLoad = function(params) {
  console.log("Scene参数：", params.itemId, params.title);
};

内容的提问来源于stack exchange，提问作者Graha Iswara