Javascript 当PayPal Plus iframe在react应用程序页面中呈现时，浏览器后退操作在Firefox中不起作用

我将PayPal Plus iframe集成到我的react应用程序中，方法是将PayPal library js脚本附加到componentDidMount中的文档中，在加载脚本时更新组件状态，然后调用library方法初始化PayPal Plus对象。这会将iframe呈现到具有相应id的占位符div中。我查阅了文档（）并进行了上述修改，将其与我的react应用程序结合使用

到目前为止，这是可行的，在最小化示例中如下所示：

但在Firefox中，一旦iframe被初始化，就不可能通过浏览器的后退按钮返回。 相反，整个组件加载在iframe内部。像这样：

这在Chrome或Internet Explorer中不会发生。 Firefox版本：81.0（64位）

如果我从DOM中手动删除iframe元素，则返回按钮将再次正常工作。 我已经尝试为“popstate”和“beforeunload”事件使用自定义事件处理程序，试图解决这个问题，但没有效果。这些事件似乎不会发生在Firefox的父窗口中

复制步骤：

• 创建react应用程序（我在示例中使用了V16.13.1）（）
• 将提供的类插入到项目中，并在App.js中使用PppComponent
• 获取有效的PayPal沙盒approvalUrl并将其设置在ppp配置对象上
• 运行纱线或npm启动
• 在Mozilla Firefox中打开应用程序，然后单击浏览器的后退按钮

这基本上是组件的相关代码：

import React from 'react';
import utils from './utils';

class PppComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            scriptLoaded: false
        }
    }

    componentDidMount() {
        utils.appendScript(
            'https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js',
            () => this.setState({scriptLoaded: true})
        );
    }

    componentWillUpdate(nextProps, nextState) {
        if (nextState.scriptLoaded) {
            this.initPaypalPlusIframe();
        }
    }

    componentWillUnmount() {
        utils.removeScript('https://www.paypalobjects.com/webstatic/ppplus/ppplus.min.js');
    }

    initPaypalPlusIframe() {
        const pppConfig = {
            approvalUrl: '{validApprovalUrl}',
            placeholder: 'ppplus',
            mode: 'sandbox',
            language: 'de_DE',
            country: 'DE',
            useraction: 'commit',
        };
        window.PAYPAL.apps.PPP(pppConfig);
    }

    render() {
        return (
            <div>
                <h1>Some Content Here</h1>
                <div id="ppplus"/>
            </div>
        );
    }
}

export default PppComponent;

有人知道为什么会发生这种情况，或者可能经历过类似的情况，并且知道如何修复/解决这种行为吗

我很高兴能得到任何帮助

先谢谢你

    class Utils {

    appendScript(scriptToAppend, onLoad) {
        const allSuspects = document.getElementsByTagName('script');
        let doAppend = true;
        if (allSuspects && allSuspects.length > 0) {
            for (let i = allSuspects.length - 1; i >= 0; i--) {
                if (allSuspects[i] && allSuspects[i].getAttribute('src') !== null
                    && allSuspects[i].getAttribute('src').indexOf(`${scriptToAppend}`) !== -1) {
                    doAppend = false;
                }
            }
        }
    
        if (doAppend) {
            const script = document.createElement('script');
            script.src = scriptToAppend;
            script.async = false;
            script.onload = () => onLoad();
            document.body.appendChild(script);
        }
    }

    removeScript(scriptToRemove) {
        const allSuspects = document.getElementsByTagName('script');
        for (let i = allSuspects.length - 1; i >= 0; i--) {
            if (allSuspects[i] && allSuspects[i].getAttribute('src') !== null
                && allSuspects[i].getAttribute('src').indexOf(`${scriptToRemove}`) !== -1) {
                allSuspects[i].parentNode.removeChild(allSuspects[i]);
            }
        }
    }
}

export default new Utils();