PHP实现点击按钮跳转新页面显示plotlyHtml内容

步骤1：修改表单，设置新窗口提交 #

在HTML的表单标签中添加target="_blank"属性，让提交请求在新标签页打开：

<form action="/Telemetry" method="post" target="_blank">

步骤2：调整PHP逻辑，避免重复输出原页面 #

原PHP代码默认加载tele.html，会导致新页面也显示原页面的导航栏和表单。修改后只在非POST请求时加载原页面，POST请求时直接输出图表内容：

<?php
ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $environ = $_POST["environ"];
    if (!empty($environ)) {
        $command = "/scripts/telemetry/pod-node.sh " . escapeshellcmd($environ);
        $output = shell_exec($command);
        $plotlyHtml = file_get_contents('/var/www/html/Telemetry/pod_schedule.html');
        echo $plotlyHtml;
        exit();
    }
} else {
    // 非提交状态下加载原页面
    include 'tele.html';
}
?>

可选：给图表页面保留统一页面框架 #

如果希望图表页面也带有原页面的导航栏和页脚，可以新建一个模板文件chart_template.html：

<!DOCTYPE html>
<html>
<head>
    <title>Pod-Node Scheduler Chart</title>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
        .navbar {
            overflow: hidden;
            background-color: #333;
        }
        .navbar a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 10px 12px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #04AA6D;
            color: black;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            font-size: 7px
        }
        .navbar .about-link {
            float: right;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="/">Home</a>
        <a href="/About" class="about-link">About</a>
    </div>
    {{PLOTLY_CONTENT}}
    <div class="footer">
        <p>BLAH BLAHH.</p>
    </div>
</body>
</html>

然后修改PHP代码，把图表内容嵌入模板：

<?php
ini_set('display_errors', 1);
ini_set('error_reporting', E_ALL);

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $environ = $_POST["environ"];
    if (!empty($environ)) {
        $command = "/scripts/telemetry/pod-node.sh " . escapeshellcmd($environ);
        $output = shell_exec($command);
        $plotlyHtml = file_get_contents('/var/www/html/Telemetry/pod_schedule.html');
        // 加载模板并替换图表占位符
        $template = file_get_contents('/var/www/html/Telemetry/chart_template.html');
        $finalHtml = str_replace('{{PLOTLY_CONTENT}}', $plotlyHtml, $template);
        echo $finalHtml;
        exit();
    }
} else {
    include 'tele.html';
}
?>

完成以上修改后，点击generate-graph按钮就会在新标签页单独显示图表内容。

内容的提问来源于stack exchange，提问作者Rakesh kumar Parida