history.pushState가 상호 작용없이 실행될 때 iOS의 Chrome에서 작동하지 않음

Question

터치/클릭 상호 작용없이 수동으로 실행하면 history.pushState가 iOS의 Chrome에서 작동하지 않는 것으로 보입니다.

iOS Chrome에서이 작업을 수행하는 이유와 가능한 경우 해결 방법을 이해하는 데 도움이 필요합니다. 여기

https://codepen.io/grymer/pen/OOmebv

은 최소 동작 예와 codepen된다. 테스트하려면 펜을 포크하고 iOS 기기의 Chrome에서 디버그보기로 이동해야합니다.

그럼 당신은 당신이 행동이 다른 브라우저와 다른 것을 볼 수 있습니다.. "B"를 말한다 버튼 "을 참조하십시오를 누른 후 다시 브라우저를 사용합니다.

var React, { Component } = React; 
var { BrowserRouter, Redirect, Route, Switch } = ReactRouterDOM; 

class App extends Component { 
    render() { 
    return (
     <BrowserRouter basename={location.href}> 
     <Switch> 
      <Route path="/b" component={B} /> 
      <Route component={A} /> 
     </Switch> 
     </BrowserRouter> 
    ); 
    } 
} 

class A extends Component { 
    constructor() { 
    super(); 

    this.state = {}; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    render() { 
    if(this.state.redirect) { 
     return <Redirect push to="/b" /> 
    } 

    return (
     <div> 
     On page A 
     <button onClick={this.handleClick}>To B</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ redirect: true }); 
    } 
} 

class B extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     showModal: false 
    }; 

    this.handleClick = this.handleClick.bind(this); 
    } 

    componentDidMount() { 
    this.button.click(); // comment this line to manually open the modal by tapping the button 
    } 

    render() { 
    return (
     <div> 
     On page B 
     { this.state.showModal ? <Modal history={this.props.history} onClose={() => this.setState({ showModal: false }) } /> : null } 
     <button ref={(el) => this.button = el } onClick={this.handleClick}>Open modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.setState({ 
     showModal: true 
    }); 
    } 
} 

class Modal extends Component { 
    constructor() { 
    super(); 

    this.handleClick = this.handleClick.bind(this); 
    this.onPopState = this.onPopState.bind(this); 
    } 

    componentDidMount() { 
    this.props.history.push(this.props.history.location.pathname, { type: 'modal' }); 
    window.addEventListener('popstate', this.onPopState); 
    } 

    componentWillUnmount() { 
    window.removeEventListener('popstate', this.onPopState); 
    } 

    render() { 
    return (
     <div> 
     Modal is opened 
     <button onClick={this.handleClick}>Close modal</button> 
     </div> 
    ); 
    } 

    handleClick() { 
    this.props.onClose(); 
    this.props.history.goBack(); 
    } 

    onPopState() { 
    this.props.onClose(); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('react-container')); 

Answer 1

크롬 팀은 인정하고 그들은 수정 작업을하고 있습니다.

https://bugs.chromium.org/p/chromium/issues/detail?id=783382#c3