angularjs Google Trends widget -相关查询-通过自动点击(ng-click)将视图从Top更改为Rising

holgip5t 于 2022-10-31 发布在 Angular

关注(0)|答案(1)|浏览(209)

Google趋势允许在任何HTML页面上嵌入搜索趋势数据的小部件。小部件“相关查询”显示热门和瑞星搜索查询的数据。默认情况下，当嵌入的小部件加载时，它会显示热门查询。
我想默认显示上升查询视图，而不是顶部查询视图。它可以从小部件菜单手动切换。我正在寻找一种方法，通过在HTML页面上的1个或多个小部件中仅显示上升查询视图来自动化该过程。
“Stack Overflow”关键字的相关查询小部件示例：https://jsfiddle.net/Lox8heyt/
图片：https://i.stack.imgur.com/Wnqxa.png

<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2213_RC01/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("RELATED_QUERIES", {"comparisonItem":[{"keyword":"Stack Overflow","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=Stack%20Overflow&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>

**Google Trends API：**我没有在小部件代码中找到更改视图的选项。

是否可以通过JS自动点击小部件按钮，将视图从Top更改为Rising？例如，使用XPath或JS路径？
NG-单击：

ng-click="ctrl.setViewField('risingBullets')
ng-click="ctrl.setViewField('bullets')"

路径路径：

//*[@id="menu_container_0"]/md-menu-content/md-menu-item[1]/button

JS路径：

document.querySelector("#menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button")

选择器：


# menu_container_0 > md-menu-content > md-menu-item:nth-child(1) > button

angularjs

来源：https://stackoverflow.com/questions/64307690/google-trends-widget-related-queries-change-view-from-top-to-rising-via-auto

1条答案

按热度按时间

42fyovps1#

这不是一个答案本身，但我希望它能帮助一点
看看谷歌的趋势小部件，
通常，您可以从jquery调用一个Angular 方法，如下所示：

angular.element($(".md-menu-item-text")).triggerHandler('click');
//angular.element('#someElemnt').scope().AngularFunction();

有很多这样的例子：
Call Angular Function with Jquery
How to call angular scope function from javascript?
仅举几个例子....然而，从我的测试来看，这似乎只有在你点击谷歌趋势小部件后才能工作，我认为这是因为小部件创建了一个iframe，似乎需要用户交互才能使父页面看到Angular ，而且因为它是一个动态呈现的iframe，所以您无法以任何有意义的方式强制激活或挂钩它。您可以尝试使用具有回调函数的npm版本

googleTrends.interestOverTime({keyword: ['Women\'s march', 'Trump Inauguration']})
.then(function(results){
  console.log('These results are awesome', results);
  //call some function here 
})
.catch(function(err){
  console.error('Oh no there was an error', err);
});

在“then”方法中，您应该可以访问angular来找到调用其事件的元素，因为此时您知道angular已加载且可访问，但这只是一个尚未测试的理论，
我注意到，在使用jquery document on load函数时，angular是未定义的（同样是因为它似乎是在iframe中），但是只要您以任何方式与小部件交互，那么您似乎就能够访问其中的元素，并且可以调用angular，还可以使用上面的示例代码调用所讨论的按钮的click事件
你可以看看实际使用angular来实现谷歌趋势，这似乎是谷歌在他们的示例页面中使用的：https://trends.google.com/trends/explore
这似乎已经设置上升为默认选项的一些他们的例子，这意味着它必须是可能的
我希望这对你有帮助

赞(0）回复(0）举报 2022-10-31

我来回答

angularjs Google Trends widget -相关查询-通过自动点击(ng-click)将视图从Top更改为Rising

1条答案

相关问题

热门标签

最新问答