PHP引入文件后按钮输出位置异常问题求助

问题现象 #

执行以下代码时，按钮HTML出现在容器标签外，容器内还多出字符"1"：

$vidplayBtn = require __DIR__ . '\..\vid-play-btn.php';
if( $displayButton ) { 
    $output = '<div class="hero-video-play"><div class="container">';
    $output .= $vidplayBtn;
    $output .= '</div></div>'; 

    echo $output;
}

实际输出：

<a href="#jsModalVideo" rel="modal:open" role="button" class="btn_play btn_play_color-" title=""> 
    <div class="flex__container_btn-play"> 
        <p>What makes us different?</p> 
        <svg .... </svg> 
    </div> 
</a>

<div class="hero-video-play"><div class="container">1</div></div>

vid-play-btn.php内容：

<a href="#jsModalVideo<?= $btn_play_c_video_id ?>" rel="modal:open" role="button" class="btn_play btn_play_color-<?= $btn_play_c_color ?>" title="<?= $btn_play_c_title ?>">
  <div class="flex__container_btn-play">
        <p><?= $btn_play_c_caption ?></p>
        <svg version="1.1" class="play" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
            <path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> 
            <path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> 
            <path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1 V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9 L38,69z"/> 
        </svg>
  </div></a>

原因分析 #

问题核心是PHP的require机制：

• vid-play-btn.php中的HTML代码通过<?= ?>语法直接输出到浏览器输出流，执行require时这段内容会立即打印，不会被赋值给$vidplayBtn。
• 当被包含文件没有return语句时，require的返回值为1（表示文件成功加载），因此$vidplayBtn的值是1，最终拼接到$output里就变成了容器内的"1"。

解决方案 #

方式一：修改被包含文件，返回HTML字符串 #

将vid-play-btn.php改为用return返回拼接好的HTML内容：

<?php
return '<a href="#jsModalVideo' . $btn_play_c_video_id . '" rel="modal:open" role="button" class="btn_play btn_play_color-' . $btn_play_c_color . '" title="' . $btn_play_c_title . '">
  <div class="flex__container_btn-play">
        <p>' . $btn_play_c_caption . '</p>
        <svg version="1.1" class="play" x="0px" y="0px" height="100px" width="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
            <path class="stroke-solid" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> 
            <path class="stroke-dotted" fill="none" stroke="white" d="M49.9,2.5C23.6,2.8,2.1,24.4,2.5,50.4C2.9,76.5,24.7,98,50.3,97.5c26.4-0.6,47.4-21.8,47.2-47.7 C97.3,23.7,75.7,2.3,49.9,2.5"/> 
            <path class="icon" fill="white" d="M38,69c-1,0.5-1.8,0-1.8-1.1 V32.1c0-1.1,0.8-1.6,1.8-1.1l34,18c1,0.5,1,1.4,0,1.9 L38,69z"/> 
        </svg>
  </div></a>';
?>

此时require会把返回的字符串赋值给$vidplayBtn，最终按钮HTML会正确嵌套在容器内。

方式二：用输出缓冲捕获require的输出 #

如果不想修改vid-play-btn.php，可以使用输出缓冲函数拦截它的输出：

if( $displayButton ) { 
    ob_start(); // 开启输出缓冲，阻止内容直接输出
    require __DIR__ . '\..\vid-play-btn.php';
    $vidplayBtn = ob_get_clean(); // 获取缓冲内容并关闭缓冲

    $output = '<div class="hero-video-play"><div class="container">';
    $output .= $vidplayBtn;
    $output .= '</div></div>'; 

    echo $output;
}

ob_start()会暂时存储输出内容，ob_get_clean()将缓冲的HTML赋值给$vidplayBtn，同时清空缓冲，实现按钮HTML与容器的正确拼接。

内容的提问来源于stack exchange，提问作者user4103074