代码之家 › 专栏 › 技术社区 › Geoff_S

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

jquery php javascript

Geoff_S · 技术社区 · 6 年前

我已经建立了一个CMS,它允许用户建立静态的图像和文本内容页面,仅用于在整个建筑的电视屏幕上显示。我已经完成了这一点,以查看它的页面显示,但只有当我在URL中明确调用它时。问题是,我想通过保存在URL中的显示进行加载。

例如,如果单击“显示3”,现在的URL是 http://local.CMSTest.com/showDisplay.php?display=3

这会调用一个函数,使用3作为显示ID来抓取具有该显示ID的所有页面。这很有效,但在我的HTML中,我在其中 foreach 在那里,它将与该显示相关联的两个页面加载到一个拥挤的页面中,一半和一半。所以我知道这是可行的,但我想我也需要将这些页面存储到一个JavaScript数组中。

我想有一种方法可以让我在默认情况下用第一页加载它并将其附加到URL中,比如 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,它将从数组中获取每个页面,用我以前的数组中的页面ID替换以下URL。我该怎么做呢?

<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)

2 回复 | 直到 6 年前

Andrew Lohr 6 年前

首先,您需要从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();

techjeffharris 6 年前

你需要

解析 frames.displayArea.location.href
Dash.nextIndex (params.page_id + 1) % Dash.dashboards.length 0 params.page_id undefined
dashboard.url display_id page_id

newURL

display: function() {
    // step 1
    let queryString = frames.displayArea.location.href.split("?")[1];
    let paramArr = queryString.split("&");
    let params = {};

    paramArr.forEach((param) => {
        let [name, value] = param.split("=");
        params[name] = value;
    })

    console.log("params: ", params)

    // step 2
    Dash.nextIndex = (params.page_id) 
        ? (params.page_id + 1) % Dash.dashboards.length
        : 0;

    var dashboard = Dash.dashboards[Dash.nextIndex]; 

    // step 3
    let newURL = dashboard.url + "?display_id=" + params.display_id
        + "&page_id=" + Dash.nextIndex;

    // Unrelated nit: bracket access IMHO should only be used when specifying a 
    // property by the string value contained in a variable, or when the 
    // property name would be an invalid javascript variable name (starting 
    // with a number, including spaces, etc)
    frames.displayArea.location.href = newURL;

    setTimeout(Dash.display, dashboard.time * 1000);
}