JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<!--<scr ipt type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=General+Motors&cmpt=q&content=1&cid=GEO_MAP_0_0&export=5&w=480&h=440"></scr ipt>

<ifr ame src="//haw ttre nds.a pps pot.com/"></iframe>
-->
<iframe id="myGoogleFrame" width="500" height="330" style="border: none;" src="https://trends.google.com/trends/embed/explore/RELATED_QUERIES?req={%22comparisonItem%22%3A[{%22keyword%22%3A%22bobcat%22%2C%22geo%22%3A%22US%22%2C%22time%22%3A%22all%22}]%2C%22category%22%3A0%2C%22property%22%3A%22%22}&tz=300&eq=date%3Dall%26q%3Dbobcat%26geo%3DUS"></iframe>


<scr ipt type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=bobcat&cmpt=q&geo=US&cid=GEO_MAP&w=480&h=440"></sc ript>


<button id="suggestBtn">ClickME to list suggested Queries</button>

JavaScript

/*$("#suggestBtn").click(function(){
var expanded = $('span[ng-bind$="bidiText"]').first().html();
alert(expanded);

var a = document.querySelectorAll('[ng-bind="bidiText"]');
console.log(a);
for (var i in a) {
    //alert(a[i].innerText);
  //console.log(i);
  console.log(a[i].innerText);

}
});*/


const iframe = document.querySelector('#myGoogleFrame');
iframe.onload = () => {
   alert('iframe is completely loaded');
   
   var a = iframe;//.querySelectorAll('[ng-bind="bidiText"]');
   //var iframeDocument = a.contentDocument || a.contentWindow.document;
   
   console.log($('a.progress-label.ng-scope.ng-isolate-scope').html());
}

/*
body > div.trends-wrapper.ng-scope > trends-widget > ng-include > widget > div > div > ng-include.embed-content.ng-scope > div > div:nth-child(1) > div > ng-include > a > div > div.label-text.ng-scope.ng-isolate-scope > span

html
#myGoogleFrame
handler.elem
*/