Question

我正在尝试以引导程序模式加载iframe（专门嵌入YouTube）。如果我将iframe代码直接放入模式中，则可以正常加载。但是，当我通过变量回显iframe代码时，它将不会加载。我可以在模态之外回显iframe，它可以很好地加载，它只是在iframe中不会加载的模态之内。

这适用于案例1

<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <iframe width="1280" height="720" src="https://www.youtube.com/embed/9Gb7M7S6T7U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

这还将加载iframe CASE 2

<?php
    echo $video;
?>
<div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

在案例3中不起作用

    <div class="modal fade" id="video-modal" tabindex="-1" role="dialog" aria-labelledby="video-modalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <?php
                    echo $video;
                ?>
            </div>

        </div>
    </div>
</div>

知道为什么吗？

对于上下文，这是在Wordpress 5，PHP7中，并且$ video的值是从ACF字段中调用的。

Answer 1

经过大量研究，我找到了解决此问题的方法。这与在渲染HTML的那一部分之前执行PHP有关，这将阻止从PHP变量传递任何值。

我知道有2种可能的解决方案，我使用了后者。

此SO Question

中概述了解决方案1

解决方案2是

使用wp_localize_script本地化iframe字符串
使用jQuery从本地化数据中获取字符串
“。html（）”将iframe字符串放入模式主体

那个jQuery看起来像这样

(function ($, video_data) {
$(document).ready(function () {

    var video = video_data.video_data['video'];

    $('#video-modal').find('.modal-body').html(video);


});})(jQuery, video_data);

Bootstrap Modal将不会加载PHP变量

1 个答案: