Repository: next.js
Issue: iFrame will not call the onLoad handler in dev mode
Labels: bug

### Link to the code that reproduces this issue

https://github.com/robcaldecott/iframe-nextjs

### To Reproduce

Clone the repo and first build the app that will be hosted in an `iframe` (this part is build using Vite but that does not matter).

```bash
cd remote
npm install
npm run dev
```

This will start a little app on http://localhost:5173. Leave this running.

Now, in a separate shell, run the NextJS app that exhibits the issue:

```bash
cd host
npm install
npm run dev
```

Open http://localhost:3000 in your browser, and open the DevTools so you can see the console.
Refresh the page and note that there are no console messages and the three `iframe` components on the page do not get the `onLoad` handler called.

![image](https://github.com/user-attachments/assets/2105d327-e190-4943-be49-0b4cdc73cc39)

However, if you make changes to the source and the app is reloaded by HMR then sometimes the `onLoad` event will work. But this is intermittent.

Next, shut down the NextJS `host`, build it for production and start it up:

```bash
cd host
npm run build
npm start
```

Go to http://localhost:3000 and refresh the page - you will see that `onLoad` is now working for all three `iframe` components correctly.

![image](https://github.com/user-attachments/assets/0f951ec5-9766-42a0-aac3-cc6727d17c28)

![image](https://github.com/user-attachments/assets/a055c0b0-9c96-42e2-b602-e86efdbca3e2)


### Current vs. Expected behavior

When running the NextJS `host` app in dev mode I would expect the `onLoad` handler on the `iframe` elements to work. However, it never works in dev mode when refreshing the page.

In production mode everything works correctly and the three `onLoad` events work as expected.

Included in the repo is a host app written using Vite and the latest React 18 build. This app does not suffer from this issue and `onLoad` works in dev and prodcuction.


### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:13:04 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 12
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.8 // Latest available version is detected (14.2.8).
  eslint-config-next: 14.2.8
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Which stage(s) are affected? (Select all that apply)

next dev (local)

### Additional context

I have tried the following to get the `onLoad` event to fire in dev mode:

- Make everything a client component with `use client`.
- Disabling React Strict mode in the NextJS config.
- Throttling the network.
- Throttling the CPU.
- Using `addEventListener` on the `iframe` `ref` to capture the `load` event.
- Replacing the iframe content with a public website URL.
- Using Safari instead of Chrome.

None of these make any difference: `onLoad` will not work when refreshing the page in dev mode. It will only fire occasionally when editing the code and causing the module to reload.

While the app works fine in production, I am relying on `onLoad` working in dev mode as the host then communicates with each `iframe` using `postMessage` (this code has been removed to simplify the example.) I can hack around this using a `useEffect` with a `setTimeout` to call `setLoaded` but this is not ideal.