如何识别第 3 方 iframe 中的 Ajax 更新

Question

当页面加载时，它包含一个第 3 方 iframe（读取：文件上传器）。我选择一个文件，单击“开始上传”按钮，上传完成后，我会收到一条“谢谢 - 上传完成”消息。

• 没有 Ajax 响应（据我所知）。

• 第三方确实允许我指定消息。我还可以在该消息中添加...。

上传完成后，我需要使用我从一开始就知道的 upload_file_id 更新隐藏输入。如果“上传完成”消息/时刻/事件，我想捕获/使用什么。但页面的动态性对我来说有点新鲜，我需要一些支持。

提前致谢。

Answer 1

不幸的是，您将无法访问 iframe 的任何有用属性，除非它与您的代码位于同一主机/域中。这是所有当前/有价值的浏览器实现的安全功能 - 称为同源或跨域策略。

检测第三方 iframe 中的更改的唯一选择是第三方代码是否支持向周围框架发送消息。有几种方法可以做到这一点，但需要它们的支持。如果他们不这样做，你就无能为力。如果是我，我会检查以下内容：

1. 阅读第三方文档，看看他们是否支持触发任何js消息或事件
2. 看看除了 iframe 之外，第三方系统是否提供了另一种方式来实现相同的功能。

脚本标签？

对于您可以添加的消息，您是否测试过是否可以向该消息添加任何 HTML 标签？这不太可能，但如果是这样，您可以添加自己的脚本标记来与框架进行通信，触发您自己的函数（即“window.iframeSuccess”）并告诉您事件已发生...

下面的代码只有在双方都属于同一域（外框架和 iframe）的情况下才有效。否则会被同源策略拦截。

<script>
if( window && window.parent && window.parent.iframeSuccess ){
  window.parent.iframeSuccess();
}
</script>

相反，您可以实现以下专为框架之间的通信而设计的代码。这是一个更现代的解决方案，因此不适用于较旧的浏览器 - 要查看支持它的内容，您可以在此处阅读：

现在哪些浏览器支持 window.postMessage 调用？

如何使用的示例window.postMessage- 首先是外框架中的代码：

function messageListener(event){
  /// make sure we only get messages from where we expect
  if ( event.origin != "http://the-domain-we-expect-from.com" ){ return; }
  /// here you can do what you want depending on the message you get
  alert(event.data);
}

/// define for nearly every modern browser
if (window.addEventListener){
  addEventListener("message", messageListener, false);
} else {
  /// fallback for internet explorer
  attachEvent("onmessage", messageListener);
}

然后将代码放入iframe中：

if( window && window.parent && window.parent.postMessage ){
  window.parent.postMessage('success', 
     'http://the-domain-we-are-sending-to.com');
}

欲了解更多信息，您可以在这里阅读：

https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

图像标签？

如果他们阻止脚本标签，他们可能会允许图像标签。如果是这种情况，您可以使用一个稍微棘手的选项，即嵌入一个向服务器端脚本报告的图像，然后服务器端脚本可以在数据库中标记该事件...

<img src="http://mysite.com/image-that-is-actually-a-script.php?id=user-id" />

然而，为了让你的 javascript 注意到这个事件，你将需要某种轮询系统，它不断地从你的 js 检查你的服务器端数据库（通过 ajax 或 websockets） - 并且你将需要能够唯一地标识两个用户双方（您的和第三方）具有某种 id。因此，只有当第三方系统允许您将用户 ID （或其他一些唯一的用户信息）插入到向用户显示的消息中时，此方法才可行。如果您别无选择，这几乎是最后的后备方案。