-1

I am learning Google scripting and I've created a simple web app. Using it (client-side), a creep behavior (to me) was observed in Google Chrome navigator:

Trying to get a element via console with the command document.getElementById("ID of a active Element"), no element was found. But, after analyze it with a inspector tool (ctrl+c in FireFox and in Chrome, and making sure that such ID exists), the element becomes reachable and, by simply repeating the fetch command ( document.getElementById("ID of a active Element") ), the expected return happens, that means, the function work properly, finds the element. I have no idea why and how such behavior should happen.

Questions: Why that behavior? How could I safely create or avoid it?

System Information: Linux debian 4.9.0-11-amd64 #1 SMP Debian 4.9.189-3+deb9u2 (2019-11-11) x86_64 GNU/Linux

P.S: In FireFox, it always return null, even after inspecting the element! The Chrome behavior is stable (doesn't find before inspection, finds after).

Thanks in advance.

A Link if you want to experience this behavior

Below, the code of the page above. The doGet function only returns that page. There is nothing more than that.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
     body{ display: grid; align-items: center; }
     button { padding-left: 40%;padding-right: 40%; }
    </style>
  </head>
  <body>
  <h1> Thank you for your support! </h1>
  <p> The button below has ID <strong>bbb</strong>. Try to find it in console with the command <span >document.getElementById("bbb")</span>. In Chrome, you will get null. But, after inspect the element (ctrl+c and click over it), you will get the button.</p>
    <button id="bbb"> My ID is bbb - click on me to copy the mentioned command above. </button>
  <p> If you try <strong>document.body.getElementsByTagName("IFRAME")[0].contentWindow.document.getElementById('bbb')</strong>, you will fail due to lack of permissions</p>
  <button id="fff"> My ID is fff - click on me to copy the mentioned command above.</button>
  </body>
  <script>
//the code of copyToClipboard was copied from https://www.30secondsofcode.org/blog/s/copy-text-to-clipboard-with-javascript only used to illustrate this question.
  const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
  document.getElementsByTagName("BUTTON")[0].onclick = function(){ copyToClipboard( 'document.getElementById("bbb")' )};
document.getElementsByTagName("BUTTON")[1].onclick = function(){ copyToClipboard( 'document.body.getElementsByTagName("IFRAME")[0].contentWindow.document.getElementById("fff")' )};
  </script>
</html>
TheMaster
  • 45,448
  • 6
  • 62
  • 85
Daniel Bandeira
  • 360
  • 1
  • 2
  • 12
  • 1
    What does that have to do with Google Apps Script? – Cooper Jun 17 '20 at 11:36
  • 1
    I have the same behaviour. I'm not sure but it seem like the console cant access the inside of the "userHtmlFrame", wich is normal i think. But once you inspected the element it force add it to the list of targetable elements. – Julien Maret Jun 17 '20 at 11:46
  • 2
    You'll need to show some code that replicates the problem ([mcve]). – Guy Incognito Jun 17 '20 at 11:47
  • 1
    Look at this solution : https://stackoverflow.com/questions/14451358/how-to-pick-element-inside-iframe-using-document-getelementbyid – Julien Maret Jun 17 '20 at 11:49
  • Cooper - I have only observed it in a google app script. It's the initial point to this question. – Daniel Bandeira Jun 17 '20 at 12:05
  • 1
    Then share that Google Apps Script so that we can reproduce the problem [mcve] – Cooper Jun 17 '20 at 12:41
  • Everything you need for your question must be posted in your question. I don’t follow links to spreadsheets. [mcve] – Cooper Jun 17 '20 at 12:43
  • Copper - I have already done it! Click on the link in the comment or in the main question. I have update it. In the link, you could reproduce exactly what I want to mean. – Daniel Bandeira Jun 17 '20 at 12:57
  • Julien Maret - Thank you. Interesting link! Give me a partial explanation. The answer to the question is around IFRAMEs... I will take it in considaration. – Daniel Bandeira Jun 17 '20 at 13:00
  • https://script.google.com/a/educacao.mg.gov.br/macros/s/AKfycbyKUyfI1bJ9-ZfFZK9BQHccU8l0ugjVDXeMl7W7IVkX/dev – Daniel Bandeira Jun 17 '20 at 13:21
  • 1
    Provide [mcve]. Where is your html and gs, minified and reproducible? – TheMaster Jun 17 '20 at 15:50
  • I will update the question. Nothing new if you have visited the page/link I post. But it seems to be very usefull to you... ok.. no problems... adding HTML code. – Daniel Bandeira Jun 17 '20 at 18:05
  • 1
    1. You should know that the link you posted was never public. You should login into your Google account to even try testing. 2. I don't see document.getElementById() in your code. Do you mean getElemtsByTagName()? 3. `document` refers to the current document. Inside a iframe, it refers to the actual iframe and not the container document. In dev tools, You can open console in the container or the iframe(click windows list). 4. What's your actual problem? Copy didn't work? – TheMaster Jun 17 '20 at 18:20
  • 1. You are right. I apologize for these points. 2. I have never mentioned that the document.getElementById() belongs to the app itself. I said "if you used this via console". When I write the web app, do it in a quick way. I only wrote this script for a more friend interface (and for some practice... the last time I've used clipboard API JS was years ago). 3. I wrote this based on the solution in Julian Mariet's link. Don't work to this case (SOP issues). 4. Good question. My mistake. A element is not accessible when you fetch it (console). After a inspection, you repeat the cmd and works. – Daniel Bandeira Jun 17 '20 at 18:39
  • 3. Like I said, you should console into the iframe: see [this](https://developer.mozilla.org/en-US/docs/Tools/Working_with_iframes) – TheMaster Jun 17 '20 at 20:37

1 Answers1

1

To use the console within the context of the iframe, choose the iframe you need to connect to, in the window icon in Firefox or the "top" bar in chrome.

The frame, where your html resides is the frame with src https://*-script.googleusercontent.com.

TheMaster
  • 45,448
  • 6
  • 62
  • 85
  • I don't think it answers my question. I would like to know how it is possible: search a find (give null), inspect item,search again, gives the object! it acts like a bug, specially if you consider it is inside a iframe. Or am I getting all wrong? – Daniel Bandeira Jun 19 '20 at 00:48
  • 1
    @DanielBandeira Chrome might switch the current document as you search: See the area marked "top" and see if it changes as you search. If that's not the case, post a gif or a video of you doing it in chrome. – TheMaster Jun 19 '20 at 07:12