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

Question

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

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

并调用使用3作为显示ID的函数，以抓取具有该显示ID的所有页面。 这是可行的，但是在我在那里的地方放了一个foreach html中，它将与该显示关联的两个页面都加载到了一个被塞满的页面中。 因此，我知道它正在工作，但是我也相信我需要将这些页面存储到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

您需要

1. 解析frames.displayArea.location.href以获取其查询参数。
2. 分配给Dash.nextIndex要么(params.page_id + 1) % Dash.dashboards.length因为page_id是当前正在显示的页面，我们需要下一页...或者如果params.page_id undefined params.page_id 0 。
3. 通过dashboard.url附加display_id和page_id参数来构建URL。

为了保持清洁，我建议创建一个名为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);
}

Answer 2

首先，您需要从javascript访问php数组，然后可以使用php的json_encode ，它将数组转换为JSON对象。

然后，您可以使用URL搜索参数来更改下一个可以调用的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();