在 iframe 中使用 chrome 的 post message API
Posted
技术标签:
【中文标题】在 iframe 中使用 chrome 的 post message API【英文标题】：Using post message API of chrome in iframe 【发布时间】：2018-02-24 15:56:15 【问题描述】：我正在为客户制作 chrome 扩展程序。扩展的功能是，它在帖子中添加了另一个私有按钮。当有人点击喜欢按钮时，该海报将收到通知。
我是如何使用它的：我使用了 Facebook 登录按钮，然后获取该用户的 Facebook 数据。从我得到的 Facebook SDK 中，用户应用范围 ID（数字键）、用户应用范围链接、用户名和性别等。当用户单击该 Facebook 按钮时，将从 Facebook 检索所需的数据。从这些数据中，只有姓名出现在表格中，并且用户需要通过提供他们的电子邮件和密码来填写表格。您可以查看here。当用户单击提交按钮时，表单数据和从 Facebook 检索到的数据都保存在我服务器上的数据库表中。
问题在于，Facebook SDK 代码在 chrome 扩展中不起作用，因为该扩展不允许外部脚本。因此，出于这个原因，我将 SDK 脚本保存在服务器上并制作了一个 html 页面并将其保存在那里，您可以在提供的链接中看到。为了克服这个问题，我在我的扩展中使用了 iframe，所以它不会检测到外部加载的脚本。
当数据保存在表格上时，正如我提到的，我从 Facebook 获得了一个应用范围的链接，我立即在该页面上显示该链接。这意味着它显示在我的扩展程序的 iframe 中。我想在 iframe 中的 div 元素中加载该链接时从该 iframe 中获取该链接。因为我想在我的扩展中本地使用该链接。
结论：从 iframe 中获取 URL 或链接，并且 iframe 正在从服务器加载外部 .html 文件。
你可以在这个Link查看进程
以下是我的 iframe 代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src=jquery.js></script>
</head>
<body>
<iframe src="http://bitbaysolutions.com" id="myFrame" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;border:none;overflow-y:scroll; ">
</iframe>
</body>
<script type="text/javascript" src=script2.js></script>
</html>有了这个 iframe，我想在 script2.js 中工作。我想在 iframe 中显示该链接并在本地 scripts2.js 文件中使用它。
【问题讨论】：
不清楚你在问什么。该 URL 本身并未出现在框中，但您的应用程序必须首先将其写入其中。所以你必须在某个地方已经有了这些信息。 它确实出现了，首先当你点击 facebook 按钮，然后通过提供随机电子邮件和传递点击提交表单，然后提交 url 后会出现 这不是重点。您的脚本首先从 API 请求此值，只是通过 AJAX 将其发送到您的服务器，然后再次从那里返回并放入该框中。因此，如果您需要脚本中的值 - 然后在从 API 请求它的位置获取它。 在facebook按钮点击，我得到请求的数据，然后用户名出现在表单中，你提供电子邮件和密码。通过提交表单，数据已通过 ajax 发送到插入表中的服务器。同时从相同的数据中获取链接并出现在框架中 那么，真正的问题是什么？您在用户执行 Facebook 登录后直接拥有该值，在您的 AJAX 请求之后拥有它 - 您还需要什么？ 【参考方案1】：我找到了解决方案，
我所要做的就是；使用window.postMessage(url-I-wanted-to-pass,oringin)，然后在我的本地文件上触发消息事件以获取该消息。
【讨论】：
以上是关于在 iframe 中使用 chrome 的 post message API的主要内容，如果未能解决你的问题，请参考以下文章
在 iframe 中使用 chrome 的 post message API
在 chrome 扩展的 iframe 中使用 Twitter Bootstrap JS
使用文件协议在 Chrome 中调用 iframe 中定义的 JavaScript 函数