javascript - 将页面信息加载到数组中，并将页面信息循环作为 URL

Question

我已经构建了一个 CMS，允许用户构建图像和文本内容的静态页面，仅用于在整个建筑的电视屏幕上显示。我已经完成了这个工作，可以查看显示的页面，但前提是我在 url 中明确调用它。问题是，我想通过存储在 URL 中的显示来加载。

例如，如果您单击 Display 3，现在的 URL 为 http://local.CMSTest.com/showDisplay.php?display=3

这会调用一个使用 3 作为显示 ID 的函数，该函数会抓取具有该显示 ID 的所有页面。这是可行的，但是在我的 html 中，我在其中添加了一个 foreach ，它会将与该显示相关的两个页面加载到一个拥挤的页面中，一半一半。所以我知道它可以工作，但我相信我也需要将这些页面存储到 JavaScript 数组中。

我认为可能有一种方法可以在默认情况下加载第一页并将其附加到网址，例如 http://local.CMSTest.com/showDisplay.php?display=3&page_id = 2 然后时间到了就可以去下一张，更改URL http://local.CMSTest.com/showDisplay.php?display=3&page_id = 3

所以 PHP 和 HTML 此时正在工作:

    <div class="row top">
        <?php include 'banner.php'?>
    </div>

    <div class="row middle" style="background-image: url(<?php echo $showDisplays['background_img']?>);">
        <div class="col-lg-12">
            <?if($showDisplays['panel_type_id'] == 1){?>
            <div class="fullContent" style=" height: 100%; ">
            <?php echo $showDisplays['content']?>
            </div>
            <?}?>
        </div>
    </div>

    <div class="row bottom">
        <?php include 'ticker.php';?>
    </div>

<?php }?> 

我想尝试一些像这样的 JavaScript，它将从数组中获取每个页面，并将以下 URL 替换为我之前数组中的页面 ID。我怎样才能正确地做到这一点？

<script type="text/javascript">
var Dash = {
nextIndex: 0,

dashboards: [
    {url: "http://www.google.com", time: 5},
    {url: "http://www.yahoo.com", time: 10},
    {url: "http://www.stackoverflow.com", time: 15}
],

display: function()
{
    var dashboard = Dash.dashboards[Dash.nextIndex];
    frames["displayArea"].location.href = dashboard.url;
    Dash.nextIndex = (Dash.nextIndex + 1) % Dash.dashboards.length;
    setTimeout(Dash.display, dashboard.time * 1000);
}
};

window.onload = Dash.display;
</script>

更新:

当前数组

Array ( [pageID] => 104 [page_type_id] => 1 [display_id] => 3 [slide_order] => [active] => 1 [background_img] => [panel_id] => 96 [panel_type_id] => 1 [page_id] => 104 [cont_id] => 148 [contID] => 148 [content] =>This is full content)

Answer 1

首先，您需要从 javascript 访问您的 php 数组，您可以使用 php 的 json_encode 来实现这一点，它将把数组转换为 JSON 对象。

然后你可以使用URL search params更改您可以调用的下一个 URL 的查询参数。请参阅下面的示例

function setDisplay() {
  let params = new URL(document.location).searchParams;
  let pageID = params.get("pageID");
  let disply = params.get("display");
  // set the html based on pageID and display
}

function getNextURL() {
  // encode your php array to json
  // let obj = <?php echo json_encode($myArray); ?>;

  // probably what obj will look like after above line
  // this is just for this example, you should use the line commented out above
  var obj = {
    "pageID": 104,
    "page_type_id": 1,
    "display_id": 3,
  }

  let params = new URL(document.location).searchParams;
  params.set("pageID", obj.pageID);
  params.set("display", obj.display_id);

  let url = window.location.href.split('?')[0];
  let nextURL = url + "?" + params.toString();
  console.log(nextURL);
  return nextURL
}

getNextURL();