Is there a way to make an IF statement based on a text string within an IFRAME?

Question

Currently, I have a webpage that embeds the following IFRAME:

<iframe src="https://docs.google.com/spreadsheets/u/0/d/1P9DhWOHcl14Y7-P5wCxTm-sUceckGquPoOobO75XhvM/htmlembed/sheet?gid=630924986&single=true" frameborder="0" width="393px" height="385px" style="float:centre" id="MyFrame"></iframe>

The contents of the cells are changed based on formulas. I am trying to find a way that would check if one of the cells (in this case, the cell containing "Foo" listed with a class of "S2" (see here)) contains a string. Depending on the result, it would print different things to the console. For example:

if <"Cell from inside the IFRAME with class S2"> = "stringtosearch"
  //found
  console.log("The cell contains stringtosearch!")
else
  //not found
  console.log("The cell does not contain stringtosearch. :( ")

Any help with a way of achieving this would be appreciated! I believe it can be done with jQuery, but I'm not sure on the best way to do it. I'm still new to JS.

Note: I would need to embed this into a Chrome Extension, so I cannot use the option of pulling the Google Sheets API and searching it that way, as Chrome Extensions do not allow Inline Scripting.

Thanks!

If you intend your parent page to interact with the DOM of a google sheet embedded in an iFrame then I suspect you'll be out of luck [Cross Domain Iframe Issue](https://stackoverflow.com/questions/9393532/cross-domain-iframe-issue) — Darren H, Mar 08 '20 at 17:09

score 0 · Answer 1 · answered Mar 08 '20 at 18:16

Like @DarrenH eluded to in the comments, you have the problem of a cross-domain iframe. If your iframe were on the same domain, you could extract the td of a table like so:

jQuery:

var filteredContents = $('#MyFrame').contents().find('.s2');
if (filteredContents.text() == 'stringtosearch') {
   //found
   console.log("The cell contains stringtosearch!")
}
else {
   //not found
   console.log("The cell does not contain stringtosearch. :( ")
}

Vanilla JavaScript:

var iframe = document.getElementById("MyFrame");
var element = iframe.contentWindow.document.getElementsByTagName("td");
for (int i = 0; i < element.length; i++) {
    if (element[i].classList.contains('s2')) {
       if (element[i].innerText == 'stringtosearch') {
           //found
           console.log("The cell contains stringtosearch!")
       }
       else {
           //not found
           console.log("The cell does not contain stringtosearch. :( ")
       }
    }
}

Hey. Thanks for the answer. The idea would be that the parent webpage is a published Chrome Extension. I'm not sure if that would classify as a cross-domain issue, because the Chrome Extension html page would be stored locally. I gave your answers a try. For the jQuery response, it always treated it as "Not Found", and for the Vanilla JS, it errored out with `Cannot read property 'contentWindow' of null`. I gather this means that I am hitting the cross-domain iframe issue. Is there any way of verifying this in the console, for example, to be sure? Thanks! — Wisp, Mar 09 '20 at 10:11

Is there a way to make an IF statement based on a text string within an IFRAME?

1 Answers1