使用 JS 事件侦听器确定要显示的 PHP 文件

Question

我正在使用两个不同的 PHP 文件：

tabs.php
accordion.php

其中运行循环遍历相同数据但显示数据不同。

显示哪个文件取决于用户的屏幕大小。

为了确定这一点，我使用了一个带有事件侦听器的函数。

function switchOver(screenSize) {
    if (screenSize.matches) {
        document.getElementById("test").innerHTML = `<?php include 'accordion.php';?>`;
    } else {
        document.getElementById("test").innerHTML = `<?php include 'tabs.php';?>`;
    }
}
var screenSize = window.matchMedia("(max-width: 700px)")
switchOver(screenSize)
screenSize.addListener(switchOver)

一旦 JS 确定了屏幕尺寸，它就会将 php 输出到容器中 div

<div id="test"></div>

在桌面上，内容将显示为 Bootstrap 5 个标签，在移动设备上，它们将显示为手风琴。我知道这不是真正的响应，但它按预期工作。

我有几个问题希望有更多技术知识的人能为我解答：

这安全吗？
有没有我可以学习的更优雅的选择？

非常感谢任何建议！

Answer 1

我假设您只是在使用 PHP 和 BS ... 而不是其他一些基于服务器端 JS 的渲染引擎。如果是这样，那么我对服务器端（PHP）和客户端（JS）渲染的混合感到有点困惑。在您的示例中，<?php include(... 只是将 PHP 的呈现源注入 html。（右键单击并在输出上“查看源代码”，您会看到生成的输出已嵌入到 JS 中。任何非 JS 渲染都会破坏浏览器上的输出。例如，单引号“`”将关闭该字符串，您将在浏览器呈现时收到 JS 错误。）这不是最好的方法。

现在回答您的问题：

“这安全吗？”不确定问题是什么.. 它和 PHP 一样安全：也许搜索 "how secure is PHP", 以及 how secure JS is .. .
“更优雅的选择”？这就是编码的神奇之处……如果您将 30 名开发人员放在一个房间里并询问一段代码，您将得到 30 个不同的答案——每个答案都会给您想要的输出。 Tom Scott 在 FizzBuzz.
上有一段精彩的 YouTube 视频

考虑到您问题的参数 - 我会这样做：

一个。您已经渲染了两个 PHP 文件的全部内容...

b。 ...所以没有带宽优势，...

c。 ...所以 JS 是多余的，只会增加复杂性。

d。因为这是一个 Bootstrap 问题，所以你可以渲染输出，没有像这样的 JS：

  <div id="test">
    <div class="d-block d-sm-none"><?php include 'accordion.php';?></div>
    <div class="d-none d-sm-block"><?php include 'tabs.php';?></div>
  </div>

这使用了 BS5 提供的简单显示属性 - 请参阅：https://getbootstrap.com/docs/5.0/utilities/display/#hiding-elements

使用 JS 事件侦听器确定要显示的 PHP 文件

Using JS Event Listener to Determine Which PHP File to Display

javascript

php

security

bootstrap-5