1

I want to loop through a collection of HTML elements in a iframe and figure out the order in which a set of elements appear on screen, and then create a new list off the back of it.

enter image description here

I get the iframe div at const tempPageStructure = builderShowcase.frameElement.contentDocument["all"];.

At the moment, I can't figure out, how to retrieve the element tag name as seen above, running the script below returns null at console.log(tempPageStructure[i].name);.

const activeComponents = ['app-builder-navbar', 'app-builder-hero', 'app-builder-placeholder'];
const builderShowcase = $(builderShowcaseId).get(0).contentWindow;

function getPageStructure() {
  const tempPageStructure = builderShowcase.frameElement.contentDocument["all"];
  let pageStructure = [];
  for(let i = 0; i < tempPageStructure.length; i++) {
    console.log(tempPageStructure[i].name);
    for(let j = 0; j < activeComponents.length; j++) {
      if(tempPageStructure[i].name === activeComponents[j]) {
        pageStructure.push(tempPageStructure[i])
      }
    }
  }
  console.log(tempPageStructure);
  console.log(pageStructure);
  return pageStructure;
}
methuselah
  • 12,766
  • 47
  • 165
  • 315
  • You are not looking for `el.name`, but for `el.tagName`: `let tagNames = []; for (const element of document.all) { tagNames.push(element.tagName.toLowerCase()); } console.log(JSON.stringify(tagNames));` – connexo Oct 30 '19 at 10:10
  • @connexo how do I use it with `$(builderShowcaseId).get(0).contentWindow` – methuselah Oct 30 '19 at 10:15

1 Answers1

-1

Replace tempPageStructure.name to tempPageStructure.tagName

const activeComponents = ['app-builder-navbar', 'app-builder-hero', 'app-builder-placeholder'];
const builderShowcase = $(builderShowcaseId).get(0).contentWindow;

function getPageStructure() {
  const tempPageStructure = builderShowcase.frameElement.contentDocument["all"];
  let pageStructure = [];
  for(let i = 0; i < tempPageStructure.length; i++) {
    console.log(tempPageStructure[i].tagName);
    for(let j = 0; j < activeComponents.length; j++) {
      if(tempPageStructure[i].tagName === activeComponents[j]) {
        pageStructure.push(tempPageStructure[i])
      }
    }
  }
  console.log(tempPageStructure);
  console.log(pageStructure);
  return pageStructure;
}
KletskovG
  • 520
  • 4
  • 10
  • No need for a querySelector, OP has already achieved this with what is already avalaible (`document.all`). – connexo Oct 30 '19 at 10:06
  • Thanks, how do I make this work with `$(builderShowcaseId).get(0).contentWindow`. I want to exclusively access the HTML contents in a iframe window. – methuselah Oct 30 '19 at 10:06
  • @connexo It is deprecated method https://developer.mozilla.org/ru/docs/Web/API/Document/all – KletskovG Oct 30 '19 at 10:10
  • @methuselah In this case you are using el.name You should use el.tagName – KletskovG Oct 30 '19 at 10:12
  • Can you update the answer to show how this would look like? – methuselah Oct 30 '19 at 10:20
  • Thanks, tried this. All I get is HTML, HEAD, BODY in my logs. The tags under BODY are not appearing. – methuselah Oct 30 '19 at 10:28
  • See https://imgur.com/a/KRsGXew, I am interested in the tags under BODY, but they don't appear in the loop. – methuselah Oct 30 '19 at 10:29
  • @methuselah Check this out https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977 May be it can help you – KletskovG Oct 30 '19 at 10:31