尝试将 html 元素设置为 google 趋势嵌入时出现 PHP 错误 [关闭]答案

【问题标题】：PHP error when trying to set html element to google trends embed [closed]尝试将 html 元素设置为 google 趋势嵌入时出现 PHP 错误 [关闭]
【发布时间】：2020-08-05 21:21:43
【问题描述】：

尝试使用 jquery 将元素的 html 属性设置为 google 趋势嵌入时出现错误。

<!DOCTYPE html>
<html>
<head>
    <title>Titlw</title>
</head>
<body>
    <div class="hide" id="google_trends"></div>
</body>
<script type="text/javascript">
    /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */
</script>
</html>
<?php

echo "
<script>
    $('#google_trends').removeClass('hide');
    $('#google_trends').html('<script type=\"text/javascript\" src=\"https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js\"></script> <script type=\"text/javascript\"> trends.embed.renderExploreWidget(\"TIMESERIES\", {\"comparisonItem\":[{\"keyword\":\"a\",\"geo\":\"\",\"time\":\"today 5-y\"}],\"category\":0,\"property\":\"froogle\"}, {\"exploreQuery\":\"date=today%205-y&gprop=froogle&q='a'\",\"guestPath\":\"https://trends.google.com:443/trends/embed/\"});</script>');
</script>";


?>

错误信息 -

“未捕获的 SyntaxError：无效或意外令牌”

【问题讨论】：

为什么还要让 PHP 参与进来？（该错误也读起来像开发者控制台错误，而不是 PHP/服务器端）
你为什么要这样做？当然，您可以简单地将脚本添加到 html。为什么要使用 JQuery？为什么要使用 PHP？

标签： php html jquery ajax google-trends

【解决方案1】：

您不需要使用 echo 功能打印输出。它会将自己嵌入到指定的 div 中。这里的 div id 是 google_trends
您对显示/隐藏 google_trends div 的要求将通过使用 ready 函数初始化 jquery 来实现。页面加载后，它将删除隐藏类并显示谷歌趋势请求结果。
使用 renderExploreWidgetTo 函数比 renderExploreWidget。有了它，您可以定义要在其中显示输出的 div id。

试试下面的代码。

<!DOCTYPE html>
<html>
<head>
    <title>Titlw</title>
    
</head>
<body>
    <div class="hide" id="google_trends"></div>


    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1328_RC04/embed_loader.js"> </script>
 </body>
</html>

<script type="text/javascript">
$( document ).ready(function() {
    $('#google_trends').removeClass('hide');
    trends.embed.renderExploreWidgetTo(google_trends,'TIMESERIES', {'comparisonItem':[{'keyword':'a','geo':'','time':'today 5-y'}],'category':0,'property':'froogle'}, {'exploreQuery':'date=today%205-y&gprop=froogle&q=a','guestPath':'https://trends.google.com:443/trends/embed/'});

});

</script>

注意：这是一个独立的代码，因为我添加了 jquery CDN 链接和谷歌趋势的 ember_loader js 文件。

【讨论】：