Puppeteer iframe contentFrame returns null

Question

I have an interesting puppeteer problem that I'm not sure how to solve.

I have a webpage with an iframe on it. To get the iframe handle I do the following:

const iframeHandle = await page.$('iframe')

To get the contentFrame I simply run:

const frame = await iframeHandle.contentFrame()

However, this returns null.

I printed out the iframeHandle to make sure I got the correct element, and it does grab the correct iframe:

console.dir(iframeHandle)

 _remoteObject: {
    type: 'object',
    subtype: 'node',
    className: 'HTMLIFrameElement',
    description: 'iframe',
    objectId: '{"injectedScriptId":5,"id":6}'
  },

Does anyone know how I can get the content of the iframe?

See also [this answer](https://stackoverflow.com/a/60000014/6243352) in [Puppeteer - How to fill form that is inside an iframe?](https://stackoverflow.com/questions/46529201/puppeteer-how-to-fill-form-that-is-inside-an-iframe) — ggorlen, Aug 10 '21 at 19:10

score 20 · Accepted Answer · answered Dec 29 '20 at 09:14

20

The problem is with browser startup options. Add the following to "args":

const browser = await puppeteer.launch({
    headless: false,
    args: [
      '--disable-web-security',
      '--disable-features=IsolateOrigins,site-per-process'
    ]
});

answered Dec 29 '20 at 09:14

Ilya Shevyryaev

756
6
8

score 4 · Answer 2 · answered Jan 12 '21 at 17:49

I was only able to get the frame by using page.frames() and then looping through to find the correct one. Accessing it in this way didn't require calling .contentFrame() at all.

const frames = await page.frames();
const frame = frames.find(f => f.url().includes('example.com'));

score 1 · Answer 3 · answered Nov 29 '20 at 00:43

Okay, My answer may seem a bit strange and un-elegant but it works.. the idea is to evaluate code PURELY on the tab side and get data on your end just by seeing what certain things from the tab RETURN..

(async()=>{
  const src="https://github.com"
  const browser = await puppeteer.launch({executablePath: myExecutablePath, headless: false});
  const page = await browser.newPage();
  await page.goto(src);
  await page.evaluate(`window.iframe=document.createElement('iframe');window.iframe.src='${src}';document.body.appendChild(window.iframe)`); //you get the idea, i made the iframe on the browser side
  const iframe=await page.evaluate(`window.iframe`);
  console.log(iframe);
  console.log("Above was your side iframe\nBelow is window side iframe");
  console.log(await page.evaluate(`window.iframe`));
})()

i know, i know, im not even trying to use the `.contentFrame` but I assume you wish to do something in the iframe, so i offered another way to do it *shrugs* — The Bomb Squad, Nov 29 '20 at 00:45

score 0 · Answer 4 · answered Nov 28 '20 at 13:05

0

Try:

const elementHandle = await page.$('iframe');
const frame = await elementHandle.contentFrame();

answered Nov 28 '20 at 13:05

Or Assayag

5,662
13
57
93

3

Please explain why this is helpful in the answer content. – dmitryro Nov 28 '20 at 14:45

score 0 · Answer 5 · answered Nov 28 '20 at 23:54

0

const elementHandle = await page.$('#iframe');
const frame = await elementHandle.contentFrame();
await frame.click('#introAgreeButton');

answered Nov 28 '20 at 23:54

CyberT33N

78
5

score 0 · Answer 6 · answered Oct 09 '21 at 17:32

0

use Chromium 89.0.4370, it work for me.

answered Oct 09 '21 at 17:32

Chintan Patel

136
4

Puppeteer iframe contentFrame returns null

6 Answers6

Linked