谷歌趋势小部件-相关查询-通过自动点击(ng点击)将视图从顶部更改为上升



Google Trends允许在任何HTML页面上嵌入搜索趋势数据的小部件。小部件";相关查询";显示Top和Rising搜索查询的数据。默认情况下,当嵌入式小部件加载时,它会显示Top查询。

我想在默认情况下显示Rising查询视图,而不是Top查询视图。它可以从窗口小部件菜单手动切换。我正在寻找一种方法,通过在HTML页面上的一个或多个窗口小部件中只显示上升查询视图来自动化该过程。

示例"相关查询"窗口小部件;堆栈溢出";关键字: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趋势API:我在小部件代码中找不到更改视图的选项。

是否可以通过JS自动点击小部件按钮,将视图从顶部更改为上升?例如使用XPath或JS路径?

Ng点击:

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

XPath:

//*[@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

这本身不是一个答案,但我希望它能帮助

看看谷歌趋势小部件,它清楚地写在角度,

通常,您可以从jquery调用一个angular方法,如下所示:

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

SO上有很多关于如何做到这一点的例子:

用Jquery 调用角函数

如何从javascript中调用angular scope函数?

仅举几个例子但是,根据我的测试,这似乎只有在你点击谷歌趋势小部件后才起作用,我认为这是因为该小部件创建了一个iframe,似乎需要用户交互才能让父页面看到角度,而且因为它是一个动态呈现的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);
});

在";那么";方法,您应该可以访问angular来找到调用其事件的元素,因为此时您知道angular已加载并可访问,但这只是我尚未测试的理论,

我没有注意到,当使用jquery document-on-load函数时,angular是未定义的(同样是因为它似乎在iframe中(,但只要你以任何方式与小部件交互,那么你似乎就可以访问其中的元素,可以调用angular,并可以使用上面的示例代码调用有问题的按钮的点击事件

你可以看看实际使用angular来实现谷歌趋势,这似乎是谷歌在他们的示例页面中使用的:https://trends.google.com/trends/explore

在他们的一些例子中,似乎已经将上升设置为默认选项,这意味着它必须是

我希望这能帮助

最新更新