带有 Iframe 事件和更改处理的 ReactJs
Posted
技术标签:
【中文标题】带有 Iframe 事件和更改处理的 ReactJs【英文标题】：ReactJs with Iframe events and changes handling 【发布时间】：2018-06-24 21:17:58 【问题描述】：我有一个包含 iframe 的 ReactJs 组件。该 iframe 用于完成某些工作，并在完成后回调到成功或错误页面。 在我的 chrome 浏览器的网络选项卡中，我可以看到请求和响应。 我希望能够以某种方式在前端处理这些回调，你们中有人遇到过这种类型的问题吗？
我的项目是 MVC，我的控制器中没有 Success 和 Error 操作，它是一个带有 React 的单页应用程序。
更新 我的整个 iframe 看起来像这样
这个 iframe 是第三方集成，它对静态 URL 的成功和错误进行回调：host/controller/success 和 host/controller/error
我的任务是在 React 中捕捉到这种情况，我希望这可以通过某种方式实现，我试图监听 'message' 事件，但可能是我做错了什么。
欢迎提出任何建议
【问题讨论】：
只是补充一点，如果您无权访问 iframe，这是一个相关的question 【参考方案1】：如果您拥有框架内容，则应使用窗口 postmessage 将内容发送回您的页面。 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
如果您使用的是 MVC，则可以将消息后侦听器添加到您的控制器并将它们发送回视图。
更新
我已经创建了我所说的示例。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="./main.js" type="text/babel"></script>
</body>
</html>iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.top.postMessage(
JSON.stringify(
error: false,
message: 'Here we go'
),
'*'
);
</script>
</body>
</html>main.js
// React controller used to load the iframe
class Loading extends React.Component
render()
return (
<div>
Waiting on iframe
<iframe src=this.props.iframeUrl></iframe>
</div>
);
// React controller used after iframe postmessage
class Complete extends React.Component
render()
return (
<div>
iFrame postmessage got me here
</div>
);
// Sample of controller
class Controller
constructor()
this.loading = true;
this.onMessageReceived = this.onMessageReceived.bind(this);
this.bindEvents();
this.render();
bindEvents()
window.addEventListener("message", this.onMessageReceived, false);
onMessageReceived(event)
var data = JSON.parse(event.data);
console.log(data);
this.loading = false;
this.render()
render()
if (this.loading)
ReactDOM.render(
<Loading iframeUrl="./iframe.html" />,
document.getElementById('app')
);
else
ReactDOM.render(
<Complete />,
document.getElementById('app')
);
// Run the controller
new Controller();【讨论】：
好吧，我不拥有 iframe 的内容，我所做的只是在我的 React 组件中添加标签 。您能否添加有关第二个选项的更多信息 - 侦听器？ 我现在无法真正添加代码示例，因为我正在打电话。很快就会分享一个例子 非常感谢，请 我已经用更新编辑了原始答案。让我知道这是否有帮助。 我更新了我的问题，顺便说一句，感谢您的代码示例，但这不适合我的情况以上是关于带有 Iframe 事件和更改处理的 ReactJs的主要内容，如果未能解决你的问题，请参考以下文章
在 iOS 设备上的 iframe 中未触发 Click/Tap 事件