3

我通过将 PayPal 库 js 脚本附加到 componentDidMount 中的文档，将 PayPal Plus iframe 集成到我的 react 应用程序中，在加载脚本时更新组件状态，然后调用库方法来初始化 PayPal Plus 对象。这会将 iframe 呈现到具有相应 id 的占位符 div 中。我查阅了文档（https://developer.paypal.com/docs/paypal-plus/germany/integrate/integrate-payment-wall/#）并进行了上述修改以将其与我的 react 应用程序结合使用。

到目前为止，这有效，并且在最小化示例中看起来像这样：具有渲染 ppp iframe 的页面

但是，在 Firefox 中，一旦 iframe 已初始化，就无法通过浏览器的后退按钮导航回来。相反，整个组件被加载到 iframe 中。像这样：点击返回按钮后的页面

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

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

重现步骤：

  • 创建反应应用程序（我在示例中使用 V16.13.1）（https://reactjs.org/docs/create-a-new-react-app.html#create-react-app）。
  • 将提供的类插入到项目中，并在 App.js 中使用 PppComponent。
  • 获取有效的 PayPal 沙箱approvalUrl 并将其设置在 ppp 配置对象上。
  • 运行 yarn 或 npm start。
  • 在 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;

这些是 util 函数，用于附加和删除脚本：

    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();

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

我会很高兴有任何帮助。

先感谢您。

4

0 回答 0