Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Puppeteer iframe contentFrame returns null

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?

like image 839
Dirk Hoekstra Avatar asked Nov 28 '20 12:11

Dirk Hoekstra


People also ask

What is contentframe in puppeteer?

contentFrame function. Puppeteer example for switching to Iframe entering text inside a text bar that is present inside a frame.

How to handle iFrames in puppeteer?

There are three stages to handle the iFrames in puppeteer : 1 Find the iFrames 2 Store the iFrames in a Variable 3 Perform the operation on the variable as if it is an object of the page More ...

How to switch from frame to parent page in puppeteer?

Switching from frame to the parent page in puppeteer: When we are working in the child frame of a page and if we want to switch the page level then we do not have to switch or do anything. Just use the page variable as if you never inside a frame, the puppeteer will perform the task on the page level.

How to get the contents of an iframe in Python?

You can find the iframe just like you find an element in puppeteer using the $eval. Once you find the iFrame we need to get the contents of the Iframe, for that you can use the contentFrame function. Puppeteer example for switching to Iframe entering text inside a text bar that is present inside a frame.


3 Answers

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'
    ]
});
like image 128
Ilya Shevyryaev Avatar answered Oct 19 '22 12:10

Ilya Shevyryaev


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'));
like image 44
spencer.sm Avatar answered Oct 19 '22 12:10

spencer.sm


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`));
})()
like image 1
The Bomb Squad Avatar answered Oct 19 '22 13:10

The Bomb Squad