如何解决当PayPal Plus iframe在React应用程序页面中呈现时,浏览器后退操作在Firefox中不起作用
我通过将PayPal库js-script附加到componentDidMount中的文档,在脚本加载后更新组件状态,然后调用库方法来初始化PayPal Plus对象,从而将PayPal Plus iframe集成到我的react应用程序中。这会将iframe渲染为具有相应ID的占位符div。我查阅了文档(https://developer.paypal.com/docs/paypal-plus/germany/integrate/integrate-payment-wall/#),并进行了上述修改以将其与我的react应用结合使用。
到目前为止,它一直有效,并且在最小化示例中看起来像这样:page with rendered ppp iframe
不过,在Firefox中,一旦iframe初始化,就无法通过浏览器的后退按钮进行后退。 而是将整个组件加载到iframe中。像这样:page after clicking back button
在Chrome或Internet Explorer中不会发生这种情况。 Firefox版本:81.0(64位)
如果我从DOM中手动删除了iframe元素,则后退按钮将再次正常工作。 我已经尝试将自定义事件处理程序用于“ popstate”和“ beforeunload”事件,以尝试解决此问题,但无济于事。这些事件似乎不会在Firefox的父窗口中发生。
复制步骤:
- 创建react应用(我在示例中使用的是V16.13.1)(https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)。
- 将提供的类插入项目并在App.js中使用PppComponent。
- 获取有效的PayPal沙箱核准网址,并将其设置在ppp config对象上。
- 运行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();
有人知道为什么会发生这种情况,或者是否经历过类似的事情并且知道如何解决/解决此问题?
我很高兴得到任何帮助。
谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。