Need to get the iframe height back to the parent

[donfiftyidaho]

I trying to get the current height of the iframe passed up to the parent so I can dynamically reset the height of the containing div.
The iframe content contains accordion drop downs and as they are opened I need to change the height of the containing div.

Is this possible with this library?

Thanks - Don

[David J. Bradshaw]

It should happen automatically, try different height calculation methods if it is not working

On Fri, 26 Jun 2020 at 15:51, donfiftyidaho ***@***.***> wrote: I trying to get the current height of the iframe passed up to the parent so I can dynamically reset the height of the containing div. The iframe content contains accordion drop downs and as they are opened I need to change the height of the containing div. Is this possible with this library? Thanks - Don — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#30>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEQOET6VV7D5RLGK6PCDETRYSYXRANCNFSM4OJMX4JA> .

-- Sent from my iPhone.

[donfiftyidaho]

Sorry about taking so long to get back, just circling back around to the iFrame.
I'm still getting no data back from the iframe.
I've set my component up to use your example of advanced usage.
I also create the message-data component to see the returned data. But that component never gets any data.
Where would I access the messageData.height value?

I also created a new create-react-app and tried to use the same example code and got the same results, so perhaps I'm not grasping what your component really does?

Perhaps you can see something I'm missing?

I do appreciate any help you might be able to give.

Here's my code:

import React, { useEffect, useContext, useRef, useState } from 'react';
import IframeResizer from 'iframe-resizer-react';
import { ProductsContext } from '../productsContext';
import PropTypes from 'prop-types';
import MessageData from './message-data';

const LegacyEditor = props => {
  const adminUrl = process.env.REACT_APP_LEGACY_URL;
  console.log('URL', adminUrl);
  const src = `${adminUrl}product_editor_frame.php?id=${props.id}`;
  const { state } = useContext(ProductsContext);
  const iframeRef = useRef(null);
  const [messageData, setMessageData] = useState();

  useEffect(() => {
    console.log('ID', state.products[props.id].isOpen);
  }, [state.products[props.id]]);

  const onResized = data => setMessageData(data);

  const onMessage = data => {
    setMessageData(data);
    iframeRef.current.sendMessage('Hello back from the parent page');
  };

  if (state.products[props.id] && state.products[props.id].isOpen) {
    return (
      <>
        <IframeResizer
          id={props.id}
          forwardRef={iframeRef}
          checkOrigin={false}
          heightCalculationMethod="lowestElement"
          inPageLinks
          log
          onMessage={onMessage}
          onResized={onResized}
          src={src}
          style={{ width: '1px', minWidth: '100%' }}
        />
        <MessageData data={messageData} />
      </>
    );
  }
  return <div></div>;
};

LegacyEditor.propTypes = {
  id: PropTypes.number
};

export default LegacyEditor; 

Here is the console.log output:

[iFrameSizer][Host page: 3358] IFrame scrolling disabled for 3358
[iFrameSizer][Host page: 3358] [init] Sending msg to iframe[3358] (3358:8:false:true:32:true:true:null:lowestElement:null:null:0:true:parent:scroll) targetOrigin: *
[iFrameSizer][Host page: 3358] [iFrame.onload] Sending msg to iframe[3358] (3358:8:false:true:32:true:true:null:lowestElement:null:null:0:true:parent:scroll) targetOrigin: *