Attached Event on anchor inside iframe does work in carousel when the iframe component are moved.[ReactJS]

Question

I am showing iframe in a carousel (react-slick) in ReactJS. I add an on click event listener on anchor inside the iframe using jquery. The event is attached when the iframe loads. The click works correctly in normal case but when I move the component from right to left in the carousel then click stop working.

Here is my code:

class MyFrame extends React.Component{

  constructor(props) {
   super(props);
  }

  componentDidMount() {
    this.props.hpStartedPlayingEvent();
  }
  myFrameOnLoadHandler() {
    let self = this;
    $(this.myIframe).contents().find("a").on('click', function(){
        let url = this.getAttribute("href");
        self.props.hpHandleLinkInsideMyFrameClicked(url);

    });
    $(this.myIframe).contents().find("img").bind('dragstart', function(){
        return false;
    });
}
  render() {
   return (
      <div className="myFrame" style={{ width: this.props.data.width }}>
         <iframe  onLoad = {this.myFrameOnLoadHandler.bind(this)} src={this.props.data.myFrame.URL} className="myFrameImg" ref={(ref) => {this.myIframe = ref;} }  frameBorder="0" scrolling="no" id="myFrameIdDefault"/>
     </div>
   );
  }
}

I checked it looks like content() returning empty in the later case. What shall I do? Thanks.

score 0 · Accepted Answer · answered Jul 31 '18 at 08:33

0

I was using translate3d for moving carousel. When changing translate3d to simple translate works.

answered Jul 31 '18 at 08:33

stormForce

86
6

Attached Event on anchor inside iframe does work in carousel when the iframe component are moved.[ReactJS]

1 Answers1