Question 277013 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – DOM – Access an element – Frame within a frame

Background

I am quite familiar with using javascript to retrieve information from webpages. Typically I can use window.frames["FrameName"].document.getElementById("ElementID"); as a way to get an element within a frame. I have learned that if an element is within a frame then window.document.getElementById("ElementID"); will not work since it needs to look in the frame.

Problem

I have a webpage where it has a frame within a frame so I am a bit unsure how to write the syntax correctly. Below is a snippet of what the page’s code looks like to get a good idea:

enter image description here

First frame shown above.

Within that frame:

enter image description here

This is where my second frame is located. Then within that frame is my element I am after:

enter image description here

What I have tried

When I use the following I can find the first frame no problem:

var first_frame = window.frames["iFrameResizer0"];

first_frame.id;

Now I have tried the following and can’t get anything to return back for the second frame:

var second_frame = first_frame.frames["contentFrame"];

second_frame.id;

Also:

var second_frame = first_frame.window.frames["contentFrame"];

second_frame.id;

Also:

var second_frame = first_frame.window.document.frames["contentFrame"];

second_frame.id;

Also:

var second_frame = first_frame.document.frames["contentFrame"];

second_frame.id;

Unable to find the second frame. Does anyone know what I am missing?

Tags:

2

Answers


  1. 0

    Given that:

    1. both frames are on the same domain and
    2. you are serving the file through a server and not directly from the file system (using the file:/// protocol)

    You can access the table element in the second frame like this:

    const frame1 = window.frames["iFrameResizer0"].contentWindow;
const frame2 = frame1.frames["contentFrame"].contentDocument;
const table = frame2.querySelector('table');

    Where "iFrameResizer0" and "contentFrame" are the IDs of the first and second frames respectively.

    Here is a simple demo that demonstrates the concept. If it doesn’t work in your case there is something else going on.

    index.html

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Iframe demo</title>
  <style>
    iframe {
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>

<iframe src="one.html" id="iFrameResizer0"></iframe>
<button>Click Me</button>

 <script>
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    const frame1 = window.frames["iFrameResizer0"].contentWindow;
    const frame2 = frame1.frames["contentFrame"].contentDocument;
    const table = frame2.querySelector('table');
    console.log(table);
  });
 </script>
</body>
</html>

    one.html

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>One</title>
  <style>body { background: pink; }</style>
</head>
<body>
  <h1>Frame One</h1>
  <iframe src="two.html" id="contentFrame"></iframe>
</body>
</html>

    two.html

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Two</title>
  <style>body { background: cyan; }</style>
</head>
<body>
  <h1>Frame Two</h1>
  <table>
    <tr>
      <th>Company</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Germany</td>
    </tr>
  </table>
</body>
</html>

    Set this up as described, then click the button to see the table in the second frame logged to the console.

    Login or Signup to reply.
  2. 0

    you may want to use contentWindow or contentDocument properties of the iframe.

    you may also need to wait for the iframe to load.

    e.g.

    <iframe
  id="frame1"
  style="width: 600px; height: 400px"
  srcdoc='<iframe id="frame2" style="margin: 1em" srcdoc="<div>find me</div></iframe>"></iframe>'
></iframe>

    const frame1 = document.querySelector('#frame1');
frame1.onload = function() {
  const frame2 = frame1.contentWindow.document.querySelector('#frame2');
  const div = frame2.contentWindow.document.querySelector('div');
  console.log(div.innerHTML);
}

    demo: https://livecodes.io/?x=id/f5kd7d9jwi9&console=open

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search