contentDidMount is triggered at a different time than onLoad.

[cixiangtao]

I have a situation where I need to dynamically calculate the height of an iframe after it has loaded. However, I found in the source code that contentDidMount is triggered before the srcDoc has finished loading, resulting in incorrect height calculation because the css and js have not finished loading at that time.

[ryanseddon]

Can you create a test case showing the problem

[ryanseddon]

Analysis of contentDidMount timing issue.

Problem: contentDidMount is triggered when the React content is mounted, but before external resources (CSS, JS) in initialContent have finished loading. This causes incorrect height calculations when trying to measure the iframe content immediately.

Current Behavior:

• contentDidMount fires when the Content component's componentDidMount lifecycle method runs
• This happens immediately after React renders, not after window.onload

Potential Solutions:

1. Document the current behavior (recommended first step)

   • Clearly document that contentDidMount fires when React mounts, not when all resources load
   • Provide example showing how to use iframe's load event for resource-loaded scenarios

2. Add new callback contentDidLoad

   • Add a new prop that fires when the iframe's window.onload event fires
   • This would indicate all resources (CSS, JS, images) have loaded
   • Example:

   <Frame 
     contentDidMount={() => console.log('React mounted')}
     contentDidLoad={() => console.log('All resources loaded')}
   />

3. Delay contentDidMount (breaking change)

   • Wait for iframe load event before calling contentDidMount
   • Could break existing code that expects immediate callback

Recommendation:
Implement option 1 (documentation) first, then consider option 2 (new callback) as an enhancement if users need it.

Workaround for now:
Users can access the iframe window through FrameContext and add their own load listener:

const { window } = useFrame();
useEffect(() => {
  const handleLoad = () => calculateHeight();
  window.addEventListener('load', handleLoad);
  return () => window.removeEventListener('load', handleLoad);
}, []);