时间戳

首页 > 解决方案 > 使用 api 从 youtube 收集标题会在 jekyll 中产生奇怪的行为

javascript - 使用 api 从 youtube 收集标题会在 jekyll 中产生奇怪的行为

问题描述

我使用以下代码在我的 jekyll 博客中获取 youtube 标题。

<script type="text/javascript">
    function getyoutubetitle(videoID) {
        $.getJSON('https://www.googleapis.com/youtube/v3/videos?id='+videoID+'&key=AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60&part=snippet&callback=?',function(data){
            if (typeof(data.items[0]) != "undefined") {
                document.write(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

使用时，<script>getyoutubetitle("iClTTtecJhs");</script>我会重新加载页面以仅提供视频标题和博客的所有其他内容。

http://songs.justinechacko.in/malayalam/2018/02/01/file5.html

标签： javascriptjekyllyoutube-data-api

解决方案

您的错误是您只是在写入页面。您需要重写要显示标题的任何位置的特定 HTML 节点。

例如，如果您想使用 id 更改标题的文本videoTitle01，那么您可以这样做：

<script type="text/javascript">
    function getyoutubetitle(nodeID, videoID) {
        let node = '#' + nodeID;
        let apiKey = 'AIzaSyDfqskjJZVzNMKVs1c7dXvlDC2rpjrB60';
        let url = 'https://www.googleapis.com/youtube/v3/videos?id=' + videoID + '&part=snippet&key=' + apiKey;
        $.getJSON(url, function(data){
            if (data && data.items && data.items[0]) {
                $(node).text(data.items[0].snippet.title);
            } else {
                console.log('video not exists');
            }
        });
    }
</script>

...

<script>
    getyoutubetitle('videoTitle01','iClTTtecJhs');
</script>
<h1 id="videoTitle01"><h1>

推荐阅读