如何将 php 内容放入 javascript 标记中？

Question

我有一个视频库，所有的标题都是php生成的。但是，这些视频的灯箱是在 javascript 中自定义的。如何将 php 标题放入 iframe markup 中？

看这里：

    $('.video').Lightbox({
      type: 'iframe'

      iframe: {
         markup: '<div class="lightbox_container">'+
                    '<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
                    '<div class="title"> <?php the_title();?> </div>'+
                  '</div>',
callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
    });

编辑

作为参考，我需要下面提到的 javascript 部分 (markup) 中的附件标题 ($attachment_data['title'])。

  <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'attachment',
    'category_name' => 'video'
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
    <?php
 $attachment_data = wp_prepare_attachment_for_js( $attachment->ID );
      echo'<figure><a class="video" href="'.get_post_meta($post->ID, 'credit_url', true).'">';
      echo''.the_post_thumbnail ('medium').'';
      echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a></figure>';?>
   <?php 
   endwhile; 
   wp_reset_postdata();
  ?>

Answer 1

试试这个：

  $('.video').Lightbox({
  type: 'iframe'

  iframe: {
     markup: '<div class="lightbox_container">'+
                '<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="title"> <?=the_title()?> </div>'+
              '</div>',
callbacks: {
markupParse: function(template, values, item) {
 values.title = item.el.attr('title');
}
});

请注意 <?= shorthand 用于 echo。 (read more about it)

Answer 2

有几种方法可以让 javascript 和 PHP 互动。您可以使用 ajax 调用从客户端拉取。如果您需要异步获取一堆数据，那可能就是这样。如果您要拥有此 iframe 的 20 个副本，您可以考虑使用 AJAX 调用来拉取整个 values/objects 数组和 JSON，然后您可以随心所欲地使用它们喜欢。

但是...我怀疑您每页只使用一次此 iframe。为一件 once-per-page 东西组装一些 ajax 可能有点矫枉过正。

如果您将 javascript 放在您的页面上，您可以按照 IzzEps 的建议进行操作，只需将 php 值直接回显到 iFrame 中即可。但我知道大多数人喜欢将他们的 javascript 与他们的 html 内容分开放在 .js 文件中。这使它更易于维护。虽然并非不可能，但 php 最容易将内容放入 .php 文件而不是其他文件，如 js。我没有任何让浏览器使用 php 文件作为脚本源的经验。

我发现最简单和最干净的方法是像往常一样在我的 .js 文件中写入我的 javascript，然后我将变量添加到我的 .php 文件中在脚本标签的顶部尽可能少。

因此，在您的页面顶部，您可以执行以下任一操作：

<script>
    ObjectYoureWorkingWith.Title = '<?php echo $the_title(); ?>';
    var TitleObjectList = <?php echo json_encode($list_of_titles); ?>;
</script>

基本上，您将来自 php 的输入输入您正在使用的任何模块、object、数组或变量，然后您可以在 javascript 中引用它无论你需要它。这样你就不会被迫将你所有的 javascript 和你的 html 放在一起。您甚至可以使用 json_encode 对 object 的整个 object 或 collection 执行此操作（无论如何这是 javascript 的原生 object 表示法） .

更新： 我在我的手机上输入上面的内容（不是回应这类事情的最佳方式）。让我演示一下我正在描述的内容：

假设在您的 php 中您有 20 个标题要使用。你可以制作一个关联数组。使用 Id 或您想要调用它的任何标识符。

$titleArray = [ 123 => 'Title1', 456 => 'Title2']; //(and so on....)

然后，在您需要该数据的 php 页面上，执行以下操作：

<script>
    var titleArray = <?php echo json_encode($titleArray); ?>;
</script>

现在您可以通过以下方式在该页面（或加载到该页面的 js 文件中）访问它：

var myFirstTitle = titleArray["123"]; //This will return "Title1"

json_encode 将采用 PHP object 并将 public 变量转换为 javascript object。简单地将此回显到 javascript 变量将提供 javascript object 来处理。

Answer 3

灯箱的开发者有一个解决方案，我已经部分实施了。为了使标题出现在灯箱中，我需要来自原始代码的回调：

callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }

但我忽略了将标题包含在我的 PHP 循环中，在此更正：

echo'<figure><a class="video" title="'.$attachment_data['title'].'" href="'.get_post_meta($post->ID, 'credit_url', true).'">';

类似的post也涵盖了这个答案，供参考： Title for iframe/video in magnific popup

再次感谢您的帮助！

如何将 php 内容放入 javascript 标记中？

How to put php content into javascript markup?

javascript

php

iframe

lightbox

markup