javascript - 如何动态更新元标签

Question

我知道这个问题经常出现，但我还无法解决我的问题。

我有一个由 php 驱动的包含视频的网站。不同的视频有自己的 URL，例如 index.php?id=1。对于 Facebook 共享，我希望每个视频/URL 都有更新的元标记。

每个视频的信息(标题、描述等)都存储在数据库中，我已成功将该信息检索到我的网站。

下面是将变量从 javascript 传递到 PHP 的脚本:

<script>
        var video;
        var URL = document.location;

        function setVideo(src){
            video = src;

            $(document).ready(function(){
                    $.ajax({
                        url: URL,
                        type: 'GET',
                        data: { 
                            videoPHP: video,      
                            }, 
                        success: function(data) {
                            // This prints the php result to html
                            $('#headerFromFile').html(data)
                         }
                     });
             });
         }
</script>

这是 PHP:

if (isset($_GET['videoPHP'])) {

    $videoID = $_GET['videoPHP'];

    // SQL query
    $sql = "SELECT * FROM Videos WHERE ID='$videoID'";
    $result = $connect->query($sql);
    $row = $result->fetch_assoc();
    ?>

    <h1><?php echo $row['Header'];?></h1>
    <p><?php echo $row['Description'];?></p>
<?php

通过这样做，我可以将视频的标题和描述回显到 html 文档中的 div #headerFromFile。

但是，问题是我希望将此信息存储到 meta property="og:title" 和 meta property="og:description" 当前 URL。

非常感谢任何帮助。

Answer 1

元标记在 ajax 运行之前写入 dom。我建议您在页面加载之前获取数据库的数据并将变量放入元标记中。

但是，如果我理解正确的话，您的内容可能会在 dom 加载后发生变化，并且在发布到 facebook 时会读取旧的元数据。我不知道这是否有帮助，因为 Facebook 可能也无法获取更新的元标记，但请尝试像这样更改元标记...

 $('meta[name=description]').remove();
 $('head').append( "<meta name='description' content='Video Title'>" );