javascript - Handle iframe in React with refs - Stack Overflow

admin管理员组

文章数量:1415145

I am trying to set the content of an iframe in a React ponent. I have a ponent in which contains a handleStatementPrint function which has to be called when the iframe finishes loading. That function must print loaded iframe content - pdf file accessed with URL this.props.pdfs.url . Already iframe content is loaded and I can see pdf file in iframe, but I need to pass iframe content with refs but don't know how to do that correctly. I know that I need to use ponentDidMount, but don't know that to write in here.

Component which must have iframe content:

import React, { Component } from 'react'

import IframeComponent from './ponents/Iframe';

class MainComponent extends Component {

  handleStatementPrint = () => {
    const iframePdf = this.iframePdf.contentWindow;
    if (this.iframePdf !== undefined) {
       const iframePdf = this.iframePdf.contentWindow;
       iframePdf.print();
    }
  }

  render () {
    return (
      <div className="container">

        {
          this.props.pdfs &&
            <iframe
              ref={(frame) => { this.iframePdf = frame }}
              src={this.props.pdfs.url}
              title="iFramePdf"
              type="application/pdf"
              >
            </iframe>
        }

      </div>
    );
  }
};

export default Statement;

Iframe ponent:

import React, { Component } from 'react'

class IframeComponent extends Component {

  ponentDidMount() {
    // Load iframe content 
  }

  render () {
    return (
      <div>
        
         <Iframe />

      </div>
    );
  }
};

export default Iframe;

I'm tried this examples:

Basic react iframe with onLoad handler

Handling of iframes in React

Iframe content is ing from fetch API, but I can access iframe and can see that content is perfectly loaded using ref. Problem: need to load that content in ponentDidMount method before calling handleStatementPrint function from another ponent which can print loaded iframe content.

Questions:

1. So how to pass correctly iframe content with refs to load content in ponentDidMountmethod?

2. How to pass loaded content from ponentDidMount method in MainComponent functions, to do actions with loaded content?

I am trying to set the content of an iframe in a React ponent. I have a ponent in which contains a handleStatementPrint function which has to be called when the iframe finishes loading. That function must print loaded iframe content - pdf file accessed with URL this.props.pdfs.url . Already iframe content is loaded and I can see pdf file in iframe, but I need to pass iframe content with refs but don't know how to do that correctly. I know that I need to use ponentDidMount, but don't know that to write in here.

Component which must have iframe content:

import React, { Component } from 'react'

import IframeComponent from './ponents/Iframe';

class MainComponent extends Component {

  handleStatementPrint = () => {
    const iframePdf = this.iframePdf.contentWindow;
    if (this.iframePdf !== undefined) {
       const iframePdf = this.iframePdf.contentWindow;
       iframePdf.print();
    }
  }

  render () {
    return (
      <div className="container">

        {
          this.props.pdfs &&
            <iframe
              ref={(frame) => { this.iframePdf = frame }}
              src={this.props.pdfs.url}
              title="iFramePdf"
              type="application/pdf"
              >
            </iframe>
        }

      </div>
    );
  }
};

export default Statement;

Iframe ponent:

import React, { Component } from 'react'

class IframeComponent extends Component {

  ponentDidMount() {
    // Load iframe content 
  }

  render () {
    return (
      <div>
        
         <Iframe />

      </div>
    );
  }
};

export default Iframe;

I'm tried this examples:

Basic react iframe with onLoad handler

Handling of iframes in React

Iframe content is ing from fetch API, but I can access iframe and can see that content is perfectly loaded using ref. Problem: need to load that content in ponentDidMount method before calling handleStatementPrint function from another ponent which can print loaded iframe content.

Questions:

1. So how to pass correctly iframe content with refs to load content in ponentDidMountmethod?

2. How to pass loaded content from ponentDidMount method in MainComponent functions, to do actions with loaded content?

• javascript
• html
• reactjs
• iframe
• ref

Share Improve this question Follow edited Apr 25, 2023 at 23:49 Jason Aller 3,6522828 gold badges4141 silver badges3939 bronze badges asked Dec 4, 2017 at 14:13 User PauliusUser Paulius 25722 gold badges44 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

This is how refs works:

<MyComponent ref={(c) => { this.myComponent = c; }} />

After ponent is MOUNTED you gain access to the ponent itself and its method:

this.myComponent.myMethod();

本文标签： javascriptHandle iframe in React with refsStack Overflow