WebObject and Storyline Variable

The number in the parenthesis is an index number. It's specifically target the IFrame you are looking to effect. In order for that to work in the example above you must be sure that the iframe is the 3rd one in the project. This is a bad practice for several reasons but the main one is that storyline may dynamically change that index number at anytime. This is why I just use the data-ref name that I mentioned above (const iframe = document.querySelector('iframe[data-dv_ref="iframe"]');).  Why, because it works only on the screen/layer you have the javascript trigger. (hint to Articulate: you need to give us the ability to tag or id the iframes we have in a project).

I'm not understanding the current intent, but if you absolutely need to use the index id for the current iFrame shown you can use this:

function getVisibleIframe() {
  const showniFrames = document.getElementsByClassName('shown');
  for (let i = 0; i < shownFrames.length; i++) {
    if (showniFrames[i].offsetParent !== null) { // Check if the element is in the document
      return showniFrames[i];
    }
  }
  return null; // If no visible iframe found
}
const iFrameId = getVisibleIframe();

if (iFrameId) {
  // Do something with the visible iframe
  console.log(iFrameId);
} else {
  console.log("No iframe is currently visible.");
}

You can also set it up so that it identifies the last iFrame in you project:

function getLastShownIframeIndex() {
  const shownFrames = document.getElementsByClassName('shown');
  if (shownFrames.length > 0) {
    return shownFrames[shownFrames.length - 1];// If you are publishing to the review link, then remove the '-1' because the content gets wrapped in another iframe on the review site, otherwise this should work. 
  } else {
    return -1; // Indicates no shown frames
  }
}
const lastShownIndex = getLastShownIframeIndex();
if (lastShownIndex !== -1) {
  //do something with the iframe
} else {
  console.log("No iframes are currently shown.");
}