react-onclickoutside不能在iframe上工作

我創建了基於reactjs的自定義下拉列表。我使用react-onclickoutside來檢測外部區域的點擊並關閉我的下拉列表。它工作得很好，但不適用於iframe區域的點擊。react-onclickoutside不能在iframe上工作

import onClickOutside from 'react-onclickoutside'; 

... 

class DevicesGroupsFilter extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      showGroups: false, 
     }; 
     this.renderGroups = this.renderGroups.bind(this); 
     this.handleClickOutside = this.handleClickOutside.bind(this); 
     this.handleOnClick = this.handleOnClick.bind(this); 
    } 

    handleClickOutside(evt) { 
     this.setState({showGroups: false}); 
    } 

    handleOnClick(event) { 
     this.setState({showGroups: !this.state.showGroups}); 
    } 

    ... 

    renderGroups() { 
     if (this.state.showGroups) { 
      return (<DevicesGroupsFilterList />) 
     } 
     return "" 
    } 

    render() { 
     let className = "filter-wrap"; 
     if (this.state.showGroups) { 
      className += " filter-dropped-down"; 
     }  

     return (
      <div className={className} id={this.props.elementId} > 
       {this.renderGroups()} 
      </div> 
     ) 
    } 
} 


module.exports = { 
    DevicesGroupsFilter: onClickOutside(DevicesGroupsFilter), 
}

使用（通過elementId通過反應成分的道具）：

ReactDOM.render(
     <DevicesGroupsFilter 
       ... 
       elementId={"my-groups-filter"} 
       ... 
     />, document.getElementById('place-groups-filter'))

來源

2017-05-05 Stan Zeez

我發現基於iframeTracker jQuery插件爲我的問題的解決方案。 1.分度類安裝插件

npm install jquery.iframetracker

。2.將IFrame的iframetrack

<div class="iframetrack" id="my-iframe-id"> 
    <iframe src="{{ src_url }}" seamless 
    style="position: absolute; border: none; zoom:1.0; overflow-y:visible;" 
    frameborder="0" width="100%" scrolling="auto" id="i-frame"> 
    {% trans "Your browser does not support the <iframe> tag" %} 
    </iframe> 
</div>

3.添加回調處理包裹iframe的模糊事件

$('.iframetrack iframe').iframeTracker({ 
    blurCallback: function() 
    { 
     // click when the list dropped down only. 
     if ($('#my-groups-filter').hasClass('filter-dropped-down')) 
     { 
      $('.filter-content').trigger('click'); 
     } 
    } 
});

當我們在包裝的iframe區域釋放鼠標按鈕（鼠標向上）時，執行blurCallback。在這個回調函數中，我們檢查過濾器是否有「過濾掉」類。如果過濾器有這個類，那麼我們爲他的關閉生成點擊。

來源

2017-06-03 18:28:47

react-onclickoutside不能在iframe上工作

回答

相關問題